使用html2canvas将dom生成图片 并下载图片到本地

一,用npm包管理工具下载 并在项目中引入使用

npm install html2canvas --save

import html2canvas from 'html2canvas'

二,在页面中写好元素 

 这是用html编写出来的页面 我现在需要将这个元素转换成图片并下载到本地,我的做法是利用canvas绘制成图片 然后利用a标签进行下载 下面是我的实现过程

三, 用html2canvas绘图并且下载

首先 要用canvas绘画某个dom元素的时候 我们需要在该获取到我们要下载的dom元素,在上面的html图片中 我在标签上添加了ref="html2canvas" vue中获取dom元素的方法 代码实现参考下面

downloadActivityImg() {
    const that = this
    
    // 获取需要绘制的元素
    const canvasID = this.$refs['html2canvas']

    // 创建一个a标签 方便后续下载绘制好的图片
    const a = document.createElement('a')

    // useCORS是是否支持跨域下载的 需要后端支持 后端不支持跨域下载就会报CORS的错误
    html2canvas(canvasID, {useCORS: true}).then((canvas) => {
        // 追加一个canvas元素
        const dom = document.body.appendChild(canvas)

        // 隐藏我们新创建的元素
        dom.style.display = 'none'
        a.style.display = 'none'
        document.body.removeChild(dom)
        const blob = that.dataURLToBlob(dom.toDataURL('image/png'))

        // 给新建的a标签添加 href属性
        a.setAttribute('href', URL.createObjectURL(blob))
        // 这块是保存图片操作  可以设置保存的图片的信息 download 是a标签下载的方法
        a.setAttribute('download', '图片'+ '.png')
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(blob)
        document.body.removeChild(a)
     })
}

这样 我们就成功的绘制好图片 并且下载成功了 有什么疑问都可以在评论区留言