前端合成图片插件html2canvas.js

本期介绍一个移动端常用的合成图片插件html2canvas.js，在H5开发中，我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。

引入

npm 安装

npm install --save html2canvas

直接引入html2canvas.js

<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

布局

先在html中把截图的元素的位置通过css布局完成

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

转换Canvas并导出图片

html2canvas.js用法其实很简单，通常情况下只需传入需要转换的DOM对象就可以了

html2canvas(document.querySelector("#capture")).then(canvas => {
    let oImg = new Image();
    oImg.src = canvas.toDataURL();  // 导出图片
    document.body.appendChild(oImg);  // 将生成的图片添加到body
});

可能出现的问题及相应解决方案

图片模糊问题

canvas先放大，其次加个dpi效果也可以

var context = canvas.getContext("2d");
var scale = 4; 

canvas.width = 70 * scale;
canvas.height = 70 * scale;
        
canvas.getContext("2d").scale(scale, scale); 

var opts = {
    dpi: window.devicePixelRatio * 4,
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: 70, //dom 原始宽度
    height: 70,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#capture"), opts).then(canvas => {
  document.body.appendChild(canvas);
});

图片不显示问题

因为图片素材出现跨域，也就是说图片所在的域名与你项目所在域名不一致；
图片放在CDN上也会导致不显示；

PNG图片不透明问题

有时你可能用到透明的PNG图片作为背景图，可是结果最后生成的图片却并不透明，这是因为html2canvas生成的canvas背景颜色默认为白色的缘故，所以导出的图片背景颜色当然也是白色。

new html2canvas(document.getElementById('qianduanwz'), {
  backgroundColor: "transparent",
  allowTaint: true,
  useCORS: true 
}).then(canvas => {
   // ……
});

生成的图片中文字间距较大

可以尝试用css属性:letter-spacing来设置字间距

「感谢阅读，后面会不断分享自己工作中用到的开源库，大家一起交流学习」