js使用html2canvas實現頁面截圖並保存圖片

 

最近在項目中碰到了一個需求是要求把當前頁面當成圖片下載到本地供首頁banner圖展示，當時看到需求，一直在找怎么把當前頁面導成圖片的方法，但是試了很多方法都沒成功（原諒我還是很菜,哈哈），這時候在網上看到個帖子，類似是做屏幕截圖，下載到本地，於是我找到了一個名叫 ‘html2canvas’ 的工具，試了之后，完美的實現了我想要的效果，用法也很簡單：

1：先下載包：npm install html2canvas；

2：然后在頁面中引入：import VueHtml2Canvas from 'vue-html2canvas';     可以在當前用的頁面引入，也可以全局在main.js中引入；

3：然后就可以在代碼中使用了：

 

created() {
    this.save();
},
methods:{
  save() {
    this.$html2canvas(this.$refs.image,{
      backgroundColor: null
    }).then((canvas) => {
      let dataURL = canvas.toDataURL("image/png");
      this.dataURL = dataURL;
    });
  }
}
這是一種寫法，還可以用es6的語法

async save() {
      const el = this.$refs.image
      const options = {
        type: 'dataURL',
        logging:false //關閉日志
      };
      this.dataURL = await this.$html2canvas(el,options)
    }

兩種寫法出來的效果都是一樣的；

但是用了之后會發現一個問題，如果當前頁面所截的圖中有圖片的話，截出的圖就只有文字沒有圖片，是因為存在圖片跨域的問題；解決辦法：要服務器返回的圖片是base64格式的，再用html2canvas截圖，問題就能解決，跨域的問題這兩天發現還有一個比較簡單的方法，就是往圖片地址后綴拼上時間戳也能解決此問題；

以上就是我這次遇到的問題的總結，自己做個記錄也希望能夠用幫到別人^_^

如有不對的地方，還請各位大佬指出；