>> 知识广场

记录一个合成图片插件html2canvas.js（JS前端开发）

分类：JS 作者：myerob 标签：合成 图片 插件 html2canvas.js JS 前端 开发 阅读：969 收藏
导读：
本文记录一个前端开发中端常用的合成图片插件(html2canvas.js)，在H5开发中，我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。html2canvas.js就…

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

1、你可以通过两种方式获取该插件：

（1）npm安装

npm install --save html2canvas

（2）直接引入html2canvas.js

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

或七牛云

<script src="https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.min.js"></script>

2、使用方法

1.安装或引入该文件。

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

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

3.转换Canvas并导出图片，html2canvas.js用法其实很简单，通常情况下只需传入需要转换的DOM对象就可以了。

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

3、常见问题与解决方法

1.生成图片模糊不清：可以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);
});

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

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

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

4.生成的图片中文字间距较大：可以尝试用css属性:letter-spacing来设置字间距

 

 

相关推荐