html2canvas 能够实现在前端直接对页面进行截屏。其实现思路是html2canvas脚本将页面元素渲染为canvas，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要服务端的操作，只在前端即可完成。
一、在项目中的使用
1. 安装html2canvas
npm install --save html2canvas
2. 在项目中使用
// 在需要使用的页面中先引入html2canvas
import html2canvas from 'html2canvas'
然后在页面中使用，如下：
在template模板中，设置要生成图片的内容，本文中要生成图片的是ref="capture"的div，然后将生成的canvas图片展示在ref="addImage"的div中
<template>
<div class="content" ref="addImage">
<div ref="capture" class="image-content">
<p>html2canvas 能够实现在前端直接对页面进行截屏。</p>
<p>其实现思路是html2canvas脚本将页面元素渲染为canvas，通过读取DOM并将不同的样式应用到这些元素上实现。</p>
<p>它不需要服务端的操作，只在前端即可完成。</p>
</div>
<div @click="generatorImage" class="img-btn">生成图片</div>
</div>
</template>
然后在js文件中，generatorImage方法实现html到图片的转换,此时即可看到页面尾部已经添加了生成的图片内容,也可以对图片转为base64编码并下载到本地。
generatorImage () {
html2canvas(this.$refs.capture).then(canvas => {
this.$refs.addImage.append(canvas);
let link = document.createElement('a');
link.href = canvas.toDataURL();
link.setAttribute('download', '图片canvas.png');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
})
}
二、html2canvas存在跨域资源无法加载
如果要生成图片的dom元素中，包含有跨域资源，比如img标签中的跨域图片,通过上述方法生成的图片中，img的内容是空白的，无法生成，这是因为canvas对于图片资源的同源限制。
解决方法： html2canvas可以设置配置项，来实现图片的加载
1.allowTaint设置成true，即可实现图片的展示
allowTaint为true是允许canvas被污染,一旦画布污染，就无法读取其数据，不能使用画布的toBolb(),toDataURL()或getImageData()方法，否则会出错.
如果我们只是展示在页面上，不通过js转为文件下载到本地（下载需要调用canvas.toDataURL()方法），则可以使用该方法。（页面中右键可以将这张图片完好的保存到本地）
2.通过服务端设置CORS
解决跨域最常用的方法是跨域资源共享，我们将图片服务器的response header设置
access-control-allow-origin: *，
即可解决跨域图片的访问，同时，配合html2canvas的配置项useCORS: true，即可实现canvas图片的转化和下载。 由于我们自己项目的文件服务器暂时没有设置CORS，所以此处例子采用淘宝的图片
<template>
<div class="content" ref="addImage">
<div ref="capture" class="image-content">
<div class="parent">
<img src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/18/167c06ce8cf413d1~tplv-t2oaga2asx-image.image'>
</div>
<div class="parent">
<img src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/18/167c06ce8d058da5~tplv-t2oaga2asx-image.image'>
</div>
<div class="parent">
<img src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/18/167c06ce8da5216c~tplv-t2oaga2asx-image.image'>
</div>
</div>
<div @click="generatorImage" class="img-btn">生成图片</div>
</div>
</template>
js文件中：
generatorImage () {
html2canvas(this.$refs.capture,{useCORS: true}).then(canvas => {
this.$refs.addImage.append(canvas);
// 通过a标签下载到本地
let link = document.createElement('a');
link.href = canvas.toDataURL();
link.setAttribute('download', '图片canvas.png');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
})
}
