我们经常会遇上动态生成海报的需求, 而在 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. 可能出现的问题及相应解决方案
1 图片模糊问题
有时候我们会发现, 导出的图片局部有些图片看起来没有原图那么清晰, 这其实是因为你使用背景图片的原因. 解决方法也很简单, 就是直接使用 < img > 标签就好了 (比如上面示例中的背景图最好是用 < img > 来替代).
2 图片不显示问题
有时你可能莫名其妙地发现有些图片并没有出现在导出的图片中, 这基本上就是因为图片素材出现跨域, 也就是说图片所在的域名与你项目所在域名不一致. 这个问题的解决方案就是 html2canvas 使用时多加以下两个配置项就好了.
- allowTaint: true,
- useCORS: true
上面例子添加配置项后的代码如下:
- new html2canvas(document.getElementById('qianduanwz'), {
- allowTaint: true,
- useCORS: true
- }).then(canvas => {
- // ......
- });
3 PNG 图片不透明问题
有时你可能用到透明的 PNG 图片作为背景图, 可是结果最后生成的图片却并不透明, 这是因为 html2canvas 生成的 canvas 背景颜色默认为白色的缘故, 所以导出的图片背景颜色当然也是白色.
解决方案也是添加一个配置项就好 (事实上经实验发现只要是非颜色类型的字符串都可以).
backgroundColor: "transparent"
上面例子添加配置项后的代码如下:
- new html2canvas(document.getElementById('qianduanwz'), {
- backgroundColor: "transparent",
- allowTaint: true,
- useCORS: true
- }).then(canvas => {
- // ......
- });
重点总结
1 生成图片的 HTML 尽量使用 < img > 而不使用背景图
2 { allowTaint: true, useCORS: true } 可解决跨域图片不显示问题
3 { backgroundColor: "transparent" } 可解决图片不透明问题
来源: http://www.jianshu.com/p/abd9e9c5ba20