vue 使用html2canvas将DOM转化为图片

1、前言

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

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

2、代码

1. 安装

npm install html2canvas --save

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

2. 使用

<div class="imageWrapper" ref="imageWrapper">
    <img class="real_pic" :src="dataURL" />
    <slot></slot>
</div>

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.有跨域图片致使生成的图片不完整

这两个问题网上百度都有不少解决办法。

3、结语

若是遇到任何没法解决的问题请在评论里留言。