本期介绍一个移动端常用的合成图片插件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来设置字间距
「感谢阅读,后面会不断分享自己工作中用到的开源库,大家一起交流学习」