我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。
具体如何使用这款插件呢？接下来请让我用一个简单的示例来为大家讲解。
现在假设要生成如下图片，而所有图片和文字都是动态获取的。
按照需求，我们无法使用PS去合成元素，只能通过代码动态生成，这时就可以用到html2canvas.js了。
1. 布局
<div id="qianduanwz">
<img src="./images/qrcode.jpg" alt="">
<p>学习Web前端<br>关注前端微站</p>
</div>
<style>
#qianduanwz{ width: 900px; height: 383px; text-align: center; background:
url("./images/bg.jpg") no-repeat center;}
#qianduanwz img{ width: 200px; margin-top: 60px;}
#qianduanwz p{ margin: 0; padding-top: 10px; font-size: 20px; color: #fff;}
</style>
2. 转换Canvas并导出图片
<script src="./scripts/html2canvas.js"></script>
<script>
new html2canvas(document.getElementById('qianduanwz')).then(canvas => {
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = canvas.toDataURL(); // 导出图片
document.body.appendChild(oImg); // 将生成的图片添加到body
});
</script>
html2canvas.js用法其实很简单，通常情况下只需传入需要转换的DOM对象就可以了。如果你对canvas导出图片有疑惑，可以看之前写的一篇文章→教你使用Canvas处理图片。
3. 可能出现的问题及相应解决方案
① 图片模糊问题
有时候我们会发现，导出的图片局部有些图片看起来没有原图那么清晰，这其实是因为你使用背景图片的原因。解决方法也很简单，就是直接使用<img>标签就好了（比如上面示例中的背景图最好是用<img>来替代）。
② 图片不显示问题
有时你可能莫名其妙地发现有些图片并没有出现在导出的图片中，这基本上就是因为图片素材出现跨域，也就是说图片所在的域名与你项目所在域名不一致。这个问题的解决方案就是html2canvas使用时多加以下两个配置项就好了。
allowTaint: true,
useCORS: true
上面例子添加配置项后的代码如下：
new html2canvas(document.getElementById('qianduanwz'), {
allowTaint: true,
useCORS: true
}).then(canvas => {
// ……
});
③ PNG图片不透明问题
有时你可能用到透明的PNG图片作为背景图，可是结果最后生成的图片却并不透明，这是因为html2canvas生成的canvas背景颜色默认为白色的缘故，所以导出的图片背景颜色当然也是白色。
解决方案也是添加一个配置项就好（事实上经实验发现只要是非颜色类型的字符串都可以）。
backgroundColor: "transparent"
上面例子添加配置项后的代码如下：
new html2canvas(document.getElementById('qianduanwz'), {
backgroundColor: "transparent",
allowTaint: true,
useCORS: true
}).then(canvas => {
// ……
});
④ 在iOS系统部分浏览器中，用<br>标签进行文字换行时，文本只显示第一行的问题
这种现象并不是必现的，但确实存在这样的问题，这时解决问题的方式也很简单，就是不用<br>标签来换行，而是采用其他块级标签元素对需要进行换行的文字分别包裹即可。
例如：
想学习前端，<br>可关注微信公众号：前端微站
可写成：
<ul>
<li>想学习前端，</li>
<li>可关注微信公众号：前端微站</li>
</ul>
重点总结
① 生成图片的HTML尽量使用
<img>而不使用背景图
②{ allowTaint: true, useCORS: true }可解决跨域图片不显示问题
③{ backgroundColor: "transparent" }可解决图片不透明问题
网友评论