前端使用html2canvas插件进行截图

问题描述

最近项目遇到这样的一个需求：进入前端页面之后，要自动截取页面中某一（或多）DOM的图像，然后将该图像以base64的格式发给后端，然后再在前端页面上进行回显。
然后我就查了一些插件，有js-web-screen-shot、html2canvas等，于是我就把这两种方法都放到项目中自己实现了一下，发现貌似html2canvas这个比较easy，于是乎我就对这种插件的实现步骤进行了如下总结~

具体的专业术语见官网 http://html2canvas.hertzen.com/ 或者其他博客，我这里废话不多说，直接上代码了

解决方案：

1、装包：npm install --save html2canvas

2、在项目中引入：import html2canvas from ‘html2canvas’

3、在methods中写截图的方法

// 截图
    toImg() {
    
    
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(document.getElementById('domToImg1'), {
    
    
        backgroundColor: null,
        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then((canvas) => {
    
    
        var url = canvas.toDataURL('image/png') // 最终生成图片的 url
        console.log(url)
        this.htmlUrl.push(url)  // 接收生成图片的 url ，可以在html中使用img标签显示该图片
      }).catch((e) => {
    
    
        console.log(e)
      })
      // console.log(this.htmlUrl)
      
      getCutImg(this.htmlUrl).then(res => {
    
    
        console.log(res)
      }).catch((e) => {
    
    
        console.log(e)
      })
    }

// 获取截图的api方法
export function getCutImg(data) {
    
    
  return request({
    
    
    url: 'http://xxxx/xxxx/xxxx',
    method: 'post',
    data
  })
}

提示：‘domToImg1’是在template中要截图的DOM元素的id；‘getCutImg’是发请求的api，不多说了

4、最后，将toImg方法放在你想何时调用截图方法中，如created、某点击事件等等……

ok，大功告成了，请求发送成功后，这就是base64的图片，将该图片复制到浏览器中，打开就可以看到自己想截取的DOM元素的图片了，然后你就可以对该图片为所欲为了~~