js利用html2canvas实现dom元素转图片下载

业务场景： 需要对页面进行截图保存
技术： JS截图插件html2canvas.js
实现在用户浏览器端直接对整个或部分页面进行截屏。
如图点击下方保存图片按钮进行上方页面转换成图片保存

首先 安装html2canvas依赖

npm install --save html2canvas

在所需页面引入

import html2canvas from 'html2canvas'

js相关代码

 saveImg() {
      let container = document.getElementById('savaImg')
      html2canvas(container, {
        width: container.clientWidth,
        height: container.clientHeight,
        ignoreElements: (element) => { // 忽略不被绘制的dom元素
          return element.className === 'tool product-view-tool'
        }
      }).then(canvas => {
        let src = canvas.toDataURL('image/jpg', 1)
        let image = new Image()
        image.src = src
        let url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream')
        let a = document.createElement('a')
        a.download = '海报.jpg' // 设置下载的文件名，默认是'下载'
        a.href = url
        document.body.appendChild(a)
        a.click()
        a.remove() // 下载之后把创建的元素删除
      })
 },

实现效果

没错。是我要的效果 ，但是图片没有显示，是肯定不行的
原因：不是本地图片有跨域问题，
so 在加一个参数

最终效果