js截图并下载图片和上传照片_js截屏保存图片-CSDN博客

本文链接：https://blog.csdn.net/beloved_jodie/article/details/131659884

该代码示例展示了如何利用html2canvas库捕获网页div内容，生成canvas，然后将canvas转换为base64数据，进一步转换为二进制文件流用于下载或上传。过程中处理了宽高缩放和跨域图片的问题。

摘要由CSDN通过智能技术生成

安装`html2canvas`

npm i html2canvas

  <div id="map"></div>
  <button onclick="btn()">截图</button>

	
    function btn(){
      const canvas = document.createElement("canvas");
      let canvasBox = document.getElementById('map');
      console.log(canvasBox);
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      html2canvas(canvasBox, { 
        allowTaint: true,
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 
      }).then((canvas) => {
        // debugger;
        const capture = canvas.toDataURL("image/png");
        console.log(saveInfo);
        //下载浏览器弹出下载信息的属性
        const saveInfo = {
          //导出文件格式自己定义，我这里用的是时间作为文件名
          download: `mapbox.png`,
          href: capture,
        };
        downloadFile(saveInfo)

        // base64转二进制数据流
        let str = base64toFile(capture, '图片名称')
        let formData = new FormData();
        formData.append("file", str);
        // 调接口上传
      });
    }

	/**
	 * 下载
	 */
    function downloadFile(saveInfo){
      const element = document.createElement("a");
      element.style.display = "none";
      for (const key in saveInfo) {
        element.setAttribute(key, saveInfo[key]);
      }
      document.body.appendChild(element);
      element.click();
      setTimeout(() => {
        document.body.removeChild(element);
      }, 300);
    }

    /**
     *  base64转二进制数据流
     *  @param  {String} data:base64图片格式字符串
     *  @param  {String} filename：文件名称
     */
    base64toFile(data, fileName) {
      const dataArr = data.split(",");
      const byteString = atob(dataArr[1]);
      const options = {
        type: "image/png",
        endings: "native",
      };
      const u8Arr = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        u8Arr[i] = byteString.charCodeAt(i);
      }
      return new File([u8Arr], fileName + ".png", options); //返回文件流
    },