图片放大镜的实现

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

功能介绍：

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

显示效果：

场景：

图片查看一般引入了插件（可旋转/翻转等），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