【前端小技能--html2canvas】告别模糊，将Dom元素生成清晰的图片并分享

html2canvas

碰到了一个需求，将阅读的文章生成一张类似海报的形式分享给微信的好友，第一时间想到了canvas，但是如果直接用canvas进行，恐怕要写很多代码了，duck不必，推荐使用：html2canvas，奉上自己的小Demo：

demo实现的需求：将指定Dom生成图片，并渲染到准备好的div中，长摁选择保存到本地相册，长摁选择分享给微信好友。
友情提示：长摁是微信自带的功能。

1、基础结构：

<div id="capture">
    <div>
        <!-- 生成图片的时候如果想要忽略此元素，可以设置data-html2canvas-ignore=‘true’ -->
        <div data-html2canvas-ignore="true">不写入canvas</div>
        <div>即将生成图片的span</div>
    </div>
</div>

<!-- 事件触发按钮 -->
<button onclick="handle()">点我生成图片</button>

<div class="myImgDIv">
	<img id="myImg" class="myImg" src="#">
</div>

2、css样式表

#capture {
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-color: pink;
    padding: 20px;
    box-sizing: border-box;
}

.myImg {
    width: 300px;
    height: 200px;
}

.myImgDIv {
    width: 300px;
    height: 200px;
    /* border: 1px solid #000; */
}
button{
    border: 0;
    background-color: green;
    color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
}

3、引入相关js并且定义处理方法handle

• 引入js的时候也可以使用cdn链接：具体链接参考：https://www.bootcdn.cn/html2canvas/
• 也可以使用cnpm install html2canvas -S进行依赖安装，然后在node_modules中找到相应的js引入即可

<script src="./js/html2canvas.min.js"></script>
<script>
		function handle() {
			html2canvas(document.getElementById("capture"), {
				scale: 2, //缩放比例,默认为1
				dpi: 1000,
				allowTaint: false,//是否允许跨域图像污染画布
				useCORS: true, 
				width: '300', //宽度
				height: '200', //高度
				borderRadis: 10,
				backgroundColor: '#fff', //画布的背景色，默认为透明
			}).then((canvas) => {
				//将canvas转为base64格式
				var imgUri = canvas.toDataURL("image/png");
				document.getElementById("myImg").setAttribute("src", imgUri)
			});
		}
	</script>

效果图：

注意：在没有修改scale、dpi值的时候，默认scale=1、dpi=96图片会很模糊，网上也有很多其他解决的方案，这里提供的简易有效的解决方案是：尽可能调大这两者的值，直到清晰为止，简单粗暴。
至此，小demo完成，如果你的需求是弹框出相应的图片，则在此基础上修改即可，或者将此demo融入到你的项目中就可以啦。希望对你有所帮助！