vue 使用html2canvas将DOM转化为图片的方法

2018-10-15 18:04

阅读：686

一、前言

我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

注意：版本比较多，这里介绍最新版

二、代码

1. 安装

npm install html2canvas --save

现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。

2. 使用

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>

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目录或者同域下的文件地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

上一篇：JS实现Cookie读、写、删除操作工具类示例

下一篇：JS代码的格式化和压缩

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue 使用html2canvas将DOM转化为图片的方法
文章链接：http://soscw.com/index.php/essay/19024.html

亲，登录后才可以留言！

vue 使用html2canvas将DOM转化为图片的方法

评论

热门文章

推荐文章

最新文章

置顶文章