html2canvas.js——HTML转Canvas工具
我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属。但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而html2canvas.js就是一款优秀的插件,它可以轻松地帮你将HTML代码转换成Canvas,进而生成可保存分享的图片。
按照需求,我们无法使用PS去合成元素,只能通过代码动态生成,这时就可以用到html2canvas.js了。
1. 布局
<div id="qianduanwz">
<img src="./images/qrcode.jpg" alt="">
<p>点击右上角分享<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>
3. 可能出现的问题及相应解决方案
① 图片模糊问题
有时候我们会发现,导出的图片局部有些图片看起来没有原图那么清晰,这其实是因为你使用背景图片的原因。解决方法也很简单,就是直接使用<img>
标签就好了(比如上面示例中的背景图最好是用<img>
来替代)。
② 图片不显示问题
有时你可能莫名其妙地发现有些图片并没有出现在导出的图片中,这基本上就是因为图片素材出现跨域,也就是说图片所在的域名与你项目所在域名不一致。这个问题的解决方案就是html2canvas
使用时多加以下两个配置项就好了。
new html2canvas(document.getElementById('qianduanwz'), {
allowTaint: true,
useCORS: true
}).then(canvas => {
// ……
});
③ PNG图片不透明问题
有时你可能用到透明的PNG图片作为背景图,可是结果最后生成的图片却并不透明,这是因为html2canvas
生成的canvas背景颜色默认为白色的缘故,所以导出的图片背景颜色当然也是白色。
解决方案也是添加一个配置项就好(事实上经实验发现只要是非颜色类型的字符串都可以)。
new html2canvas(document.getElementById('qianduanwz'), {
backgroundColor: "transparent",
allowTaint: true,
useCORS: true
}).then(canvas => {
// ……
});
④ 在iOS系统部分浏览器中,用<br>
标签进行文字换行时,文本只显示第一行的问题
这种现象并不是必现的,但确实存在这样的问题,这时解决问题的方式也很简单,就是不用<br>
标签来换行,而是采用其他块级标签元素对需要进行换行的文字分别包裹即可。
重点总结
<img>
而不使用背景图②
{ allowTaint: true, useCORS: true }
可解决跨域图片不显示问题③
{ backgroundColor: "transparent" }
可解决图片不透明问题html2canvas.js——HTML转Canvas工具的更多相关文章
- IText&Html2canvas js截图 绘制 导出PDF
Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
- js实现html转pdf+html2canvas.js截图不全的问题
最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...
- 使用html2canvas.js实现页面截图并显示或上传
最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...
- html2canvas.js网页截图功能
需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...
- 前端Js框架汇总(工具多看)
前端Js框架汇总(工具多看) 一.总结 一句话总结: 二.前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领 ...
- html2canvas JS截图插件
github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...
- html2canvas.js插件截图空白问题
发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...
- 使用html2canvas.js将HTML生成图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js正则表达式图形化工具-rline
github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...
随机推荐
- AOP参数校验
1.切面依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...
- vulnhub-Os-hackNos-3
vulnhub-Os-hackNos-3 nmap 192.168.114.0/24 查看存活主机,发现192.168.114.142. 具体探究: 发现80和22端口是开放的. dirb没扫出来啥, ...
- MATLAB中均值、方差、均方差的计算方法
MATLAB中均值.方差.均方差的计算方法 1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均 ...
- OpenGL渲染时的数据流动
OpenGL渲染时的数据流动 文件地址:https://wws.lanzous.com/i2aR3gu251e 链接失效记得回复哦!马上更新!
- Dynamically allocated memory 动态分配内存【malloc】Memory leaks 内存泄漏
内存泄露Memory leaks :没有指针指向原来a分配出来的那段空间了
- Django新手图文入门教程
版权所有,转载需注明来源! 本文是广受大家欢迎的<Django1.10新手图文入门教程>的2.1版本升级篇,原1.10版本传送门点击我 本文面向有一些的Python基础,但刚接触web框架 ...
- C 多态 RT-Thread
// RT-Thread对象模型采用结构封装中使用指针的形式达到面向对象中多态的效果,例如: // 抽象父类 #include <stdio.h> #include <assert. ...
- 我竟在arm汇编除法算法里找到了leetcode某道题的解法
今天讲讲arm汇编中除法的底层实现.汇编代码本身比较长了,如需参考请直接拉到文末. 下面我直接把arm的除法算法的汇编代码转译成C语言的代码贴出来,并进行解析. 因为篇幅有限,所以在此只解析无符号整型 ...
- matlab中set设置图形属性
来源:https://ww2.mathworks.cn/help/matlab/ref/set.html?searchHighlight=set&s_tid=doc_srchtitle set ...
- 【题解】Product
\(\color{brown}{Link}\) \(\text{Solution:}\) \(Question:\) \(\prod_{i=1}^n \prod_{j=1}^n \frac{lcm(i ...