图片放大镜的实现(支持旋转)

功能介绍：

• 模拟圆形放大镜效果
• 支持图片旋转/翻转后的放大

显示效果：

场景：

图片查看一般引入了插件（可旋转/翻转等），blowup.js文件需要获取旋转参数值，所以需要修改我们原本有的旋转插件js

// blowup.js
$(function ($) {

    $.fn.blowup = function (attributes) {

        var $element = this;

        // If the target element is not an image
        if (!$element.is("img")) {
            console.log("%c Blowup.js Error: " + "%cTarget element is not an image.",
                "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;",
                "background: #FCEBB6; color: #F07818; font-size: 17px;");
            return;
        }

        // Constants
        var $IMAGE_URL    = $element.attr("src");
        var $IMAGE_WIDTH  = $element.width();
        var $IMAGE_HEIGHT = $element.height();
        var NATIVE_IMG    = new Image();
        NATIVE_IMG.src    = $element.attr("src");

        // Default attributes
        var defaults = {
            round      : true,
            width      : 200,
            height     : 200,
            background : "#FFF",
            shadow     : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
            border     : "6px solid #FFF",
            cursor     : true,
            zIndex     : 999999
        }

        // Update defaults with custom attributes
        var $options = $.extend(defaults, attributes);

        // Modify target image
        $element.on('dragstart', function (e) { e.preventDefault(); });
        $element.css("cursor", $options.cursor ? "crosshair" : "none");

        // Create magnification lens element
        var lens = document.createElement("div");
        lens.id = "BlowupLens";

        // Attack the element to the body
        $("body").append(lens);

        // Updates styles
        $blowupLens = $("#BlowupLens");
        $blowupLens.css("cssText",(
            "position:absolute;" +
            "visibility:hidden;" +
            "pointer-events:none;"+
            "width:"+$options.width+"px;" +
            "height:"+$options.height+"px;" +
            "border:"+$options.border +
            ";background:"+$options.background +
            ";border-radius:50%!important;" +
            "box-shadow:"+$options.shadow+
            ";background-repeat:no-repeat;"
        ))

        // Show magnification lens
        $element.mouseenter(function () {
            $blowupLens.css("visibility", "visible");
        })

        // Mouse motion on image
        $element.mousemove(function (e) {
            var isOriginal = Math.abs($element.width() - NATIVE_IMG.width) < 10 ? true : false;
            var zoomeTimes = isOriginal ? 1.5 : 1;

            // Lens position coordinates
            var lensX = e.pageX - $options.width / 2;
            var lensY = e.pageY - $options.height / 2;

            // Relative coordinates of image
            // var relX = e.pageX - this.offsetLeft;
            // var relY = e.pageY - this.offsetTop;
            var relX = e.offsetX;//修改的
            var relY = e.offsetY;//修改的

            // Zoomed image coordinates
            var zoomX = -Math.floor(relX / $element.width() * NATIVE_IMG.width * zoomeTimes - $options.width / 2);
            var zoomY = -Math.floor(relY / $element.height() * NATIVE_IMG.height * zoomeTimes - $options.height / 2);

            // 图片旋转参数值
            var rotateScale = $("#rotateScale").val();
            var bgSize =  NATIVE_IMG.width * zoomeTimes;
            console.log(rotateScale, zoomeTimes, $element.width(), NATIVE_IMG.width)

            // Apply styles to lens
            $blowupLens.css({
                left                  : lensX,
                top                   : lensY,
                "background-image"    : "url(" + $IMAGE_URL + ")",
                "background-position" : zoomX + "px" + " " + zoomY + "px",
                "transform" : rotateScale,
                "background-size"      : bgSize + "px",
                "zIndex" : $options.zIndex
            });
            // $blowupLens.css("cssText", ";border-radius：50%!important;");

        })

        // Hide magnification lens
        $element.mouseleave(function () {
            $blowupLens.css("visibility", "hidden");
        })

    }
})

修改：（以下为示例代码）

• blowup初始化，即标记哪些图片需要放大效果

  // 图片class添加imgZoom属性
  toggleClass("imgZoom", true);
  // 放大镜初始化
  $(".imgZoom").blowup({
  	background : "#FCEBB6"
  })
  

• 基于旋转插件，点击图片，弹出旋转插件，图片加载时，记录旋转参数并初始化

  this.$canvas.append('<input id="rotateScale" type="hidden" value="rotate(0deg) scale(1, 1);">')
  

• 图片旋转时，同步参数

  $("#rotateScale").val(transforms.join(' '));
  

• 旋转插件关闭时，清楚放大镜div

  $("#BlowupLens").remove();