JS原生使用Canvas截取图片并下载_Dilomen的博客-程序员宝宝

HTML部分

<body> 
  <div
      class="wrap"
      onmousedown="handleMouseDown(event)"
      onmousemove="handleMouseMove(event)"
      onmouseup="handleMouseUp(event)"
    >
      <img id="image" src="" alt="" />
      <canvas
        style="left: 30px;top: 40px;"
        width="300"
        height="200"
        id="canvas"
      ></canvas>
    </div>
    <input type="file" onchange="handleInput(event)" />
    <button onclick="handleCut()">截取</button>
    <button onclick="handleDownload()">下载</button>
</body>

CSS部分

   .wrap {
      width: 600px;
      height: 400px;
      position: relative;
      border: 1px solid #333;
      box-sizing: border-box;
    }
    #image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    #canvas {
      position: absolute;
      border: 1px solid rgb(136, 219, 119);
      background: rgba(156, 156, 156, 0.3);
      display: none;
      z-index: 100;
      box-sizing: border-box;
    }
    button {
      width: 80px;
      height: 30px;
    }

JS部分

    let imageFile = null;
    let isMouseDown = false;
    let wrap = document.getElementsByClassName("wrap")[0];
    let ctx = document.getElementById("canvas");
    let img = document.getElementById("image");
    let content = ctx.getContext("2d");
    let wrapWidth = wrap.offsetWidth;
    let wrapHeight = wrap.offsetHeight;
    let ctxWidth, ctxHeight;
    function handleInput(e) {
      imageFile = e.target.files[0];
      let fileReader = new FileReader();
      fileReader.onload = function(e) {
        img.src = e.target.result;
        canvas.style.display = "block";
        ctxWidth = ctx.offsetWidth;
        ctxHeight = ctx.offsetHeight;
      };   
      // 将文件转化为base64编码
      fileReader.readAsDataURL(imageFile);
    }

    function handleMouseDown(event) {
      if (!img.getAttribute("src")) return;
      // 一旦移动位置，就清空画布
      ctx.height = ctx.height;
      isMouseDown = true;
      updateSite(event.pageX, event.pageY);
    }
    function handleMouseMove(event) {
      if (!isMouseDown) return;
      updateSite(event.pageX, event.pageY);
    }
    function handleMouseUp(event) {
      isMouseDown = false;
    }
    // 移动canvas位置
    function updateSite(X, Y) {
      let currentTop, currentLeft;
      if (Y + ctxHeight / 2 >= wrapHeight) {
        currentTop = wrapHeight - ctxHeight;
      } else if (Y - ctxHeight / 2 <= 0) {
        currentTop = 0;
      } else {
        currentTop = Y - ctxHeight / 2;
        console.log("currentTop", currentTop, Y - ctxHeight / 2, ctxHeight);
      }
      if (X + ctxWidth / 2 >= wrapWidth) {
        currentLeft = wrapWidth - ctxWidth;
      } else if (X - ctxWidth / 2 <= 0) {
        currentLeft = 0;
      } else {
        currentLeft = X - ctxWidth / 2;
        console.log("currentLeft", currentLeft, X - ctxWidth / 2, ctxWidth);
      }
      ctx.style.top = currentTop + "px";
      ctx.style.left = currentLeft + "px";
    }

    // 截取
    function handleCut(type = "image/png") {
      if (!img.getAttribute("src")) {
        alert("请导入图片");
        return;
      }
      let cutImg = document.createElement("img");
      content.drawImage(
        img,
        -parseInt(ctx.style.left),
        -parseInt(ctx.style.top),
        wrap.scrollWidth,
        wrap.scrollHeight
      );
      cutImg.src = ctx.toDataURL(type);
      document.body.append(cutImg);
    }
    function handleDownload() {
      if (!img.getAttribute("src")) {
        alert("请导入图片");
        return;
      }
      loadFile(DataURLToFile(ctx.toDataURL()));
    }
    function DataURLToFile(dataUrl, filename = "file", type) {
      let arr = dataUrl.split(",");
      let bstr = atob(arr[1]);
      !type && (type = arr[0].replace("data:", "").replace(";base64", ""));

      let n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type });
    }
    // 下载文件
    function loadFile(content, filename = "file") {
      var aLink = document.createElement("a");
      aLink.download = filename;
      aLink.href = URL.createObjectURL(content);
      aLink.click();
      URL.revokeObjectURL(content);
    }

效果如下，截取框内的图片，并可通过下载按钮下载

本文链接：https://blog.csdn.net/Dilomen/article/details/104151313

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

计算机科学与技术syc,数学与非线性科学 - 声振论坛 - 振动,动力学,声学,信号处理,故障诊断 - Powered by Discuz!..._weixin_39685697的博客-程序员宝宝

续上...========================================================================多物理多尺度数值模拟第四届国际研讨会将在北京举办Date: Fri, 10 Nov 2006 11:16:10 -0500From: Shuyu Sun Simulation of Multiphysics Multiscale Systems4...

dirsearch中文使用手册_dirsearch 参数_Yuhao~的博客-程序员宝宝

dirsearch当前版本：v0.3.9（2019.11.26）Overviewdirsearch是一种高级的命令行工具，旨在对web服务器中的目录和文件进行暴力破解。git clone https://github.com/maurosoria/dirsearch.gitcd dirsearchpython3 dirsearch.py -u <URL> -e <EXTENSION>也可以使用此别名直接发送到代理python3 /path/to/dirsearch/d

TO_CHAR(DATE,FORMAT)_whxhz80的博客-程序员宝宝

SYSDATE2009-6-16 15:25:10　TRUNC(SYSDATE)2009-6-16　TO_CHAR(SYSDATE,'YYYYMMDD')20090616到日TO_CHAR(SYSDATE,'YYYYMMDD HH24:MI:SS')20090616 15:25:10到秒TO_CHAR(SYSTIMESTAMP...

初级程序员容易犯的错误_cym492224103的博客-程序员宝宝

作为一名合格的程序员，良好的编程习惯是必不可少的，无论你是前端还是后端或者移动端，都应该时刻注意自己的编码习惯。只有不断的注意细节力争完美，才会更快速的变成高级程序员。今天就说一说一些初...

【leetcode】字符串的常见算法问题总结（LIS、LCS、LCP、LPS、ED、KMP）_字符串lcp_哈哈村长的博客-程序员宝宝

字符串有很多比较经典的算法问题，例如：LIS（最长递增子序列）、LCS（最长公共子序列、最长公共子串）、LCP（最长公共前缀）、LPS（最长回文子序列、最长回文子串）、ED（最小编辑距离，也叫 “Levenshtein 距离”）、 KMP（一种字符串匹配的高效算法）。上面列举的经典问题，在 Leetcode 中都有对应题型，这些也是笔试面试经常会遇到的基本题型。上面列举的三个经典匹配算法中，KM...

关于KMPlayer播放器不显示字幕的解决方法_kmplayer 不显示字幕_卷雷的博客-程序员宝宝

今天用KMPlayer看时，我的srt字幕文件总是不显示，后来参考了网上的答案，把问题解决了。解决方法：打开KMP播放器，右键-视频（高级）-视频渲染器-VMR7未渲染（HQ字幕）参考答案：脑小胖的回答...