Vue使用html2canvas实现截取图片并保存

npm install html2canvas --save

import html2canvas from 'html2canvas'

methods: {  
  convertToCanvas() {  
    const element = this.$refs.element // 获取要转换的HTML元素  
    html2canvas(element).then(canvas => {  
      // 在这里可以对canvas进行操作，例如将其添加到页面中或保存为图片等  
      // 例如：this.$refs.canvasContainer.appendChild(canvas)  
    })  
  }  
}

<template>  
  <div>  
    <div ref="element">要转换的HTML元素</div>  
    <button @click="convertToCanvas">转换为Canvas</button>  
    <div ref="canvasContainer"></div>  
  </div>  
</template>

    // 获取截图
    getPicture() {
      html2canvas(this.$refs.panelPage).then(canvas => {
        // 获取生成的图片的url,并设置为png格式
        const imgUrl = canvas.toDataURL("images/png");
        let base64Data = imgUrl.split(",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }
        // 获取blob文件流
        let blob = new Blob([uint8Array], { type: "image/png" });
        // 文件流转文件
        let file = new File([blob], "filename.png", {
          type: "image/png",
        });
        let fd = new FormData()
        fd.append('file', file)
        
        // 请求后端数据接口
        coverUpload(fd) 
      })
    },

    // 获取截图
    getPicture(id) {
      html2canvas(this.$refs.panelPage, {
        useCORS: true,  // 开启跨域
      }).then(canvas => {
        // 获取生成的图片的url,并设置为png格式
        const imgUrl = canvas.toDataURL("images/png");
        let base64Data = imgUrl.split(",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }
        // 获取blob文件流
        let blob = new Blob([uint8Array], { type: "image/png" });
        // 文件流转文件
        let file = new File([blob], "filename.png", {
          type: "image/png",
        });
        let fd = new FormData()
        fd.append('file', file)
        // 请求后端数据接口
        coverUpload(id, fd)
      })
    },

location /imgSource/ {
	# 加上这三行就可以了
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
	
	autoindex on;
	alias C:/Users/11466/Desktop/serve/classe/image/;
}