JS仿京东图片局部放大效果（canvas初学实践）---项目基于vue

方式1：Canvas实现

效果图：

步骤：

1、创建两个canvas，一个canvas存放图像来源，一个canvas存放要绘制的目标图像

<canvas id="myCanvas" :width="innerWidth" :height="innerWidth * 9 / 16">
   Your browser does not support this feature.Please use Google, firefox, 360 speed mode, QQ browser speed mode, etc
</canvas>
<canvas id="newCanvas" :width="780" :height="780">
   Your browser does not support this feature.Please use Google, firefox, 360 speed mode, QQ browser speed mode, etc
</canvas>

2、设置canvas的基本样式和内容

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient((canvas.width - 300) / 2, canvas.height / 2, 100, (canvas.width - 300) / 2, canvas.height / 2, 300);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, canvas.width - 300, canvas.height - 40);
ctx.font = "30px Verdana";
ctx.strokeStyle = 'red';
ctx.strokeText("当前测试阶段", (canvas.width - 300) / 2, canvas.height / 2);

3、监听id为myCanvas的鼠标移动事件并绘制图像

setClickEvent() {
      var newCanvas = document.querySelector("#newCanvas");
      var newCtx = newCanvas.getContext("2d");

      var canvas = document.querySelector("#myCanvas")
      var ctx = canvas.getContext("2d");

      var img = document.createElement("img");
      canvas.addEventListener("mousemove", (e) => {
        newCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
        var x = e.offsetX
        var y = e.offsetY
        // 此处用于计算鼠标放置的有效范围
        if (x > 20 && y > 20 && x < canvas.width - 280 && y < canvas.height - 20) {
          var cutX, cutY;
          if (x > canvas.width - 280 - 130) {
            cutX = canvas.width - 280 - 130;
          } else if (x < 130 + 20) {
            cutX = 130 + 20;
          } else {
            cutX = x;
          }
          if (y > canvas.height - 20 - 130) {
            cutY = canvas.height - 20 - 130;
          } else if (y < 130 + 20) {
            cutY = 130 + 20;
          } else {
            cutY = y;
          }
          // 获取鼠标当前位置为中心，长为260，宽为260的正方形
          var imageData = ctx.getImageData(cutX - 130, cutY - 130, 260, 260);
          // 将获取的图像信息存入临时创建的canvas
          var tempCanvas = document.createElement("canvas");
          tempCanvas.width = newCanvas.width;
          tempCanvas.height = newCanvas.height;
          tempCanvas.getContext("2d").putImageData(imageData, 0, 0, 0, 0, newCanvas.width - 40, newCanvas.height - 40)
          // 放大3倍同时设置平滑度
          newCtx.scale(3, 3)
          newCtx.mozImageSmoothingEnabled = false;
          newCtx.webkitImageSmoothingEnabled = false;
          newCtx.msImageSmoothingEnabled = false;
          newCtx.imageSmoothingEnabled = false;
          // 绘制图像到canvas
          newCtx.drawImage(tempCanvas, 0, 0);
          // 绘制完成之后缩小到原来的大小  即1/3
          newCtx.scale(1 / 3, 1 / 3)
        }
      })
    }

方式2：IMG + JS实现

效果图：

步骤：该方式的核心在于改变图片的相对位置

1、创建存放两个图片的容器

注意:style="{left: domLeft + 'px', top: domTop + 'px'}"用于动态改变元素的位置

<div id="poster" class="poster" @mousemove="scaleThisArea">
     <img src="http://192.168.130.132/file/group1/M00/00/47/wKiCSF5soKqAYk9lABI1F4mDDZk618.png" alt="">
     <div id="scaleTool" class="scale-tool" :style="{left: domLeft + 'px', top: domTop + 'px'}"></div>
</div>
<div id="scaleWrapper" class="scale-wrapper">
     <div class="clip-area">
         <img src="http://192.168.130.132/file/group1/M00/00/47/wKiCSF5soKqAYk9lABI1F4mDDZk618.png" :style="{left:'-' + left + 'px', top: '-' + top + 'px'}" alt="">
     </div>
</div>

2、监听鼠标在图片源上的滑动事件

    scaleThisArea(e) {
      var x = e.offsetX;
      var y = e.offsetY;
      this.left = x;
      this.top = y;
    }

3、监听鼠标位置的变化，同时改变扫描框的位置

  computed: {
    domLeft() {
      var x = this.left;
      var halfWidth = 94;
      if (x < halfWidth) {
        return 0;
      } else if (x >= halfWidth && x <= 375 - halfWidth) {
        return x - halfWidth;
      } else {
        return 375 - 2 * halfWidth;
      }
    },
    domTop() {
      var y = this.top;
      var halfHeight = 94;
      if (y < halfHeight) {
        return 0;
      } else if (y >= halfHeight && y <= 375 - halfHeight) {
        return y - halfHeight;
      } else {
        return 375 - 2 * halfHeight;
      }
    }
  },

之前搞了一个公众号：大壮计算机科学与技术。闲置很久了，没什么用户，就是分享下日常和技术帖子，大家捧捧场。