【插件html2canvas】页面元素生成图片

插件html2canvas 将页面元素转换成图片
点击【复制】按钮，将页面某个区域的内容以图片的形式复制到剪切板，粘贴后是一张图片。
点击【下载】按钮，将页面某个区域的内容以图片的形式下载到本地。

1 安装插件

npm i html2canvas

2 目标页面元素

	 
     
html2canvas

 复制
 下载

3 核心逻辑

3.1 html2canvas绘制

页面元素通过插件【html2canvas】转换成图片base64

      let canvas = await html2canvas(this.$refs.refName, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      })
    // const baseStr = canvas.toDataURL('image/jpg') 

3.2 剪切板

      // 接上3.1...
      let img = new Image()
      img.src = canvas.toDataURL('image/jpg') // toDataURL :图片格式转成 base64
      const data = await fetch(img.src)
      //fetch请求图片，使用 blob() 从 response 中读取一个Blob对象来创建新的剪贴项。
      const blob = await data.blob()
      // 剪切板 navigator.clipboard ，write可以写入任意数据
      await navigator.clipboard.write([
        // eslint-disable-next-line no-undef
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ])

3.3 下载到本地

      // 接上3.1...
      let a = document.createElement('a')
      a.href = canvas.toDataURL('image/png')
      a.download = 'fileName'
      a.click()

4 总结

页面目标区域准备完毕，通过html2canvas将页面元素转换成图片base64，然后fetch请求图片，通过.blob()创建一个剪贴项，最后写入到系统剪切板。

源码如下：

    // 复制图片
    async copy() {
      this.loading = true
      let canvas = await html2canvas(this.$refs.refName, {
        backgroundColor: null,
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      })
      let img = new Image()
      img.src = canvas.toDataURL('image/jpg')
      const data = await fetch(img.src)
      const blob = await data.blob()
      await navigator.clipboard.write([
        // eslint-disable-next-line no-undef
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ])
      this.loading = false
      return this.$message({
        message: '复制成功',
        type: 'success',
      })
    },