首页技术博客 技术教程 正文

html2canvas.js——HTML转Canvas工具

5个月前 ( 02-14 ) 340 0条评论

我们经常会遇上动态生成海报的需求,而在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" }可解决图片不透明问题


文章版权及转载声明

本文作者:符文浩 网址:http://blog.haozi.org/post/352.html发布于 5个月前 ( 02-14 )
文章转载或复制请以超链接形式并注明出处。

发表评论

评论列表 (暂无评论,340人围观)参与讨论

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码