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、結語

若是遇到任何沒法解決的問題請在評論裏留言。

來源：http://www.javashuo.com/article/p-unqjttnu-bc.html