记录一个合成图片插件html2canvas.js(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来设置字间距
相关推荐
记录一个非常实用的一键复制前端插件 Clipboard.js
本文记录一个非常实用的前端插件 Clipboard.js,Clipboard.js 实现了纯JS将内容一键复制到系统剪贴板的功能。下面是该插件的使用说明:clipboard.js介绍clipboard…
2022-05-23 20:08:19 | 分类:默认 | 作者:myerob | 阅读:544 | 标签:记录 一个 一键 复制 前端 插件 Clipboard.js | 收藏
PHP json_decode()报错 json_last_error()判断错误类型及解决方法
PHP json_decode()报错 json_last_error()判断错误类型 解决背景:最近在用curl请求接口获取json数据串的时候,一直出现PHP中json_decode()解析字符串…
2022-10-29 21:45:57 | 分类:PHP | 作者:myerob | 阅读:620 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
- 阅读榜
- 1. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 2. NTC热敏电阻B值3950(温度系数对照表)
- 3. BCD码的定义以及其与十进制数据转换方法(附验证工具)
- 4. ipex1代与4代差别
- 5. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 6. workerman停止失败原因及解决方法
- 7. 主席令13届第89号《中华人民共和国印花税法》
- 8. h3c交换机乱码怎么弄(h3c 配置备份报错)如何修改交换机字符集?
- 9. 记录一个合成图片插件html2canvas.js(JS前端开发)
- 10. php页面最大执行时间 set_time_limit函数不起作用