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正则表达式 ...
随机推荐
- linux学习(五)Linux 文件与目录管理
一.Linux处理目录的常用命令 ls : 列出目录 cd :切换目录 pwd :显示目前的目录 mkdir :创建一个新的目录 rmdir :删除一个空的目录 cp : 复制文件或目录 rm : 移 ...
- PHP数据库驱动扩展概述与不同方式连接数据库总结
Author:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! CSDN@极客小俊,CSDN官方首发原创文章 个人博客: cnblogs.com ...
- 带你搭建一个简单的mybatis项目:IDEA+spring+springMVC+mybatis+Mysql
最近小编有点闲,突发奇想想重温一下mybatis,然后在脑海中搜索了一下,纳尼,居然不太会用了,想到这里都是泪啊!!现在我所呆的的公司使用的是springboot+hebinate,编程都是使用的JP ...
- POI和easyExcel
POI与easyExcel 这个东西一般用来做什么? 将用户信息导出为Excel表格(导出数据) 将Excel表中的信息录入到网站数据库(比如一些习题上传) 在开发过程中会遇到对Excel的处理,比如 ...
- Neo4j---性能优化
不会项目管理的研发不是好loder(^_^ ^_^),开个玩笑,目的是想说项目管理很重要,研发同胞们需要重视.重视.重视(重要的事情说三遍).随着项目业务扩展,不再是停留在基本某一业务范围,海量数据接 ...
- Spring学习(十一)--Spring MVC
1.MVC模式 (1)视图 通过视图展示应用数据 向应用数据提供更新动作 向控制器提交用户动作 运行控制器选择不同视图 (2)模型提供 封装应用数据状态 响应数据状态查询 提供应用功 ...
- Go-archive/tar: write after close gopher.txt
where? 在使用Go中tar包循环写入内容的时候 why? 因为已经关闭了tar.writer对象,所以无法写入,但是程序还是有写入操作,所以报错 way? 通过 defer关键字来管理资源的释放 ...
- Java 多线程并发编程
导读 创作不易,禁止转载! 并发编程简介 发展历程 早起计算机,从头到尾执行一个程序,这样就严重造成资源的浪费.然后操作系统就出现了,计算机能运行多个程序,不同的程序在不同的单独的进程中运行,一个进程 ...
- Geography's sum up
1.世界气候: 热带草原气候,热带雨林气候,热带沙漠气候,热带草原气候 温带季风气候,温带大陆性气候,亚热带季风和湿润性气候,温带海洋性气候 寒带气候,高原山地气候. 2.亚洲气候: 1.大陆性气候分 ...
- 入职大厂,齐姐精选的 9 道 Java 集合面试题
Java 集合框架其实都讲过了,有一篇讲 Collection 的,有一篇讲 HashMap 的,那没有看过的小伙伴快去补下啦,文末也都有链接:看过的小伙伴,那本文就是检测学习成果的时候啦 今天这篇文 ...