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

不吃香菜的蟹老板

已于 2024-03-06 17:05:44 修改

阅读量516

点赞数 16

分类专栏： vue 文章标签： javascript vue

于 2024-03-06 11:58:18 首次发布

本文链接：https://blog.csdn.net/qq_35227244/article/details/136501076

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

1 安装插件

npm i html2canvas

2 目标页面元素

<div ref="refName自定义" class="myContainer">
	 <img src="@/assets/img/XXXXXX.png" alt="" />
     <p>html2canvas</p>
</div>
 <el-button type="primary" @click="copy">复制</el-button>
 <el-button  @click="save">下载</el-button>

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',
      })
    },