既然你打开了这篇博客，那么你肯定碰到了和页面截图多少相关的问题，你在浏览器内生成图片也好，微信内生成页面图片也好，都需要面对把页面内容转成图片的问题。
1.将整个页面转成图片；
2.将页面内部分内容转成图片。
解决方案如下：
1.引入html2canvas
为了更便捷有效的开发，这里可以引入html2canvas这个插件，如果读者不想采用这种方案，可以跳过下面内容，自行寻求其他解决方案。
点击可以查看相关文档：html2canvas官方文档
引入方式：
npm install –save html2canvas
或者：
yarn add html2canvas
2.将html2canvas引入到组件中
该插件安装完毕后，在你需要使用的vue组件中，按照以下方式，将插件引入：
import html2canvas from “html2canvas”
到此，基本的环境已经配置完毕，接下来就可以使用了。
3.将制定区域内转成图片
首先，你需要让html2canvas获取到你想要转换的节点内容，因此，你需要添加ref标记。
示例如下：
<div class="container" ref="imageDom"></div>
imageDom需要是你想转换的页面内容的父容器，即你想转换的页面内容需要全部包含在imageDom节点内。
转换方法如下：
/**
* 将页面指定节点内容转为图片
* 1.拿到想要转换为图片的内容节点DOM；
* 2.转换，拿到转换后的canvas
* 3.转换为图片
*/
clickGeneratePicture() {
html2canvas(this.$refs.imageDom).then(canvas => {
// 转成图片，生成图片地址
this.imgUrl = canvas.toDataURL("image/png");
});
}
官方示例如下：
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
返回的canvas参数就是一个生成好的canvas元素，如果你想将他转成图片，直接使用toDataURL方法即可，将转换的图片地址赋值给你想显示的图片元素，就可以在页面上看到转换后的图片。
问题1：微信浏览器不能直接下载生成后的图片。
在chrome等浏览器下可以使用如下方法，将生成的图片直接下载下来：
// 创建隐藏的可下载链接
var eleLink = document.createElement("a");
eleLink.href = imgUrl; // 转换后的图片地址
eleLink.download = "pictureName";
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
但是微信浏览器禁用了下载链接，你只能采用引导的方式，引导用户将页面内容转成图片显示出来，用户长按显示的图片即可保存到本地。
如图所示：
问题2：页面有些内容不能在生成的图片内显示
之所以能够生成图片，是因为将页面指定的内容DOM元素转成了canvas，在转换的时候，并不是所有的css属性都支持，比如：box-shadow, text-overflow:ellipsis等。
因此，图片内容出现空白的时候，建议修改css表现样式。
生成的图片背景默认为白色，可以通过backgroundColor属性修改背景颜色，使用如下：
html2canvas(this.$refs.imageDom, {
backgroundColor: null // null 表示设置背景为透明色
})
生成的canvas宽高大小，是否允许跨域图片等，读者可参考官方文档进行相应设置。
欢迎关注博主：小圣贤君，有问题可以留言哦~