一、前言
我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件。
注意:版本比较多,这里介绍最新版
二、代码
1. 安装
npm install html2canvas --save
现在最新的版本应该是1.0.0,另外还有一个比较经典的版本是0.5.0,网上有许多关于这个版本的bug说明。
2. 使用
<div class="imageWrapper" ref="imageWrapper"> <img class="real_pic" :src="/UploadFiles/2021-04-02/dataURL">slot里面是你需要转化为图片的DOM元素。
data() { return { dataURL: '' } },dataURL是最后转化出来的图片base64地址,放在img标签中即可展示。
methods: { toImage() { html2canvas(this.$refs.imageWrapper,{ backgroundColor: null }).then((canvas) => { let dataURL = canvas.toDataURL("image/png"); this.dataURL = dataURL; }); } }html2canvas的用法非常简单,不过1.0.0已经将写法改为了promise,在.then方法里获取canvas对象。
3.常见bug
1. 生成出来的图片有白色边框
在配置项里配置backgroundColor: null即可。
2. 有图片显示不出来并有报错(一般是跨域的错)
这是最常见的一个bug,就是这个插件无法生成跨域了的图片,也看了官方文档配置了也百度了都没有好的办法,最后是让后端直接把跨域的图片转成base64,就完美解决了这个问题。
3. 生成图片后会在原始DOM上覆盖而产生一个闪动的效果
先让生成的图片隐藏,等生成好以后再展示。(没有在手机上测试,效果不一定令人满意)
4.经典版本(0.5.0)常见bug
1.生成的图片模糊
2.有跨域图片导致生成的图片不完整这两个问题网上百度都有很多解决办法。
html2canvas在vue下的巨坑
使用
html
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div>js
html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) }); ``` ![clipboard.png](/img/bVbghPZ) ``` html2canvas(document.querySelector("#capture") { async: true }).then(canvas => { document.body.appendChild(canvas) });如果你要配置一些参数可以在传入dom的后面进行 object 传参 官网文档可查
官网文档
我自己的工程环境是vue-cli会进行webpack打包在ios下运行的时候会出现错误因为我要生成一张图片是的canvas api 是 toDataURL
这错误在ios一直显示是权限问题 在ios 和safari 上的问题是一致的 原因是canva绘制dom上的图片的时候是 base64的格式(webpack会对asstes目录下的图片进行压缩)花费了几个小时才解决这个问题,感觉很不值所以分享给大家希望大家别踩进去了!解决方法是可以 static目录或者同域下的文件地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。