功能实现:canvas图片缩放与移动

仙古.梦回～

已于 2024-05-27 12:13:24 修改

阅读量449

点赞数 2

文章标签： javascript 前端 css

于 2024-05-27 11:26:55 首次发布

本文链接：https://blog.csdn.net/qq_55139096/article/details/139233565

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas图片缩放与移动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #canvas {
        position: absolute;
        top: 20px;
        left: 50%;
        width: 400px;
        height: 400px;
        transform: translateX(-50%);
        background: #f7f7f7;
      }
    </style>
  </head>
  <body>
    <button id="output">点击导出为图片</button>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script type="module">
      const canvas = document.querySelector("#canvas");
      const output = document.querySelector("#output");
      const ctx = canvas.getContext("2d");
      canvas.width = 400 * devicePixelRatio;
      canvas.height = 400 * devicePixelRatio;

      const cwidth = canvas.width
      const cheight = canvas.width
      //等待图片加载完成
      const pic = new Image();
      //你自己的图片地址
      pic.src = "./naroto.webp";
      //图片加载成功够在canvas中绘制
      pic.onload = function () {
        /*  cwidth  canvas内绘制的图片宽度
         * <style></style>标签中的400px则为样式宽度
         */
        ctx.drawImage(pic, 0, 0, cwidth, cheight);
      };


      //缩放倍率
      let scale = 2;
      const resetCanvas = (canvas, scale) => {
        /*  cwidth - scale*cwidth
         *  canvas绘制的图片宽度 - 当前绘制的图片宽度 = 两侧流白空隙
         *  故此除以2才是正确的X值
         */
        let X = (cwidth - scale * cwidth) / 2;
        let Y = (cheight - scale * cheight) / 2;
        /*清空画布*/
        ctx.clearRect(0, 0, cwidth, cheight);
        //重绘图片
        ctx.drawImage(pic, X, Y, cwidth * scale, cheight * scale);
      };
      //最大缩放倍数
      const MAX_SCALE = 5;
      //最小缩放倍数
      const MIN_SCALE = 0.5;
      //每次缩放大小
      const PER_SCALE = 0.5;
      canvas.addEventListener("mousewheel", (e) => {
        e.stopPropagation();
        e.preventDefault()
        if (e.deltaY < 0) {
          if (scale >= MAX_SCALE) return;
          scale = scale + PER_SCALE;
          resetCanvas(canvas, scale);
        } else if (e.deltaY > 0) {
          if (scale <= MIN_SCALE) return;
          scale = scale - PER_SCALE;
          resetCanvas(canvas, scale);
        }
      });
      //canvas移动图片
      let startX = 0
      let startY = 0
      canvas.addEventListener("mousedown", (e) => {
        startX = e.offsetX
        startY = e.offsetY
        canvas.style.cursor = "grab";
        canvas.addEventListener("mousemove", move);
      });
      //鼠标移动事件
      const move = (e) => {
        const x = e.offsetX - (cwidth * scale) / 2;
        const y = e.offsetY - (cheight * scale) / 2;
        //清空画布
        ctx.clearRect(0, 0, cwidth, cheight);
        //重绘图片
        ctx.drawImage(pic, x, y, cwidth * scale, cheight * scale);
      };
      //放开鼠标
      let endX = 0
      let endY = 0
      const remove = (e) => {
        canvas.style.cursor = "default";
        canvas.removeEventListener("mousemove", move);
      };

      //鼠标离开停止
      canvas.addEventListener('mouseleave',remove)

      canvas.addEventListener("mouseup", remove);
      //输出图片
      output.onclick = function () {
        const url = canvas.toDataURL("image/png");
        const img = new Image();
        img.src = url;
        img.width = 200;
        img.height = 200;
        document.documentElement.appendChild(img);
        //下载图片
        //    let link = document.createElement('a');
        //    link.download = '新图片.png';
        //    link.href = url;
        //    link.click();
      };
    </script>
  </body>
</html>