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截图，问题就能解决，跨域的问题这两天发现还有一个比较简单的方法，就是往图片地址后缀拼上时间戳也能解决此问题；

以上就是我这次遇到的问题的总结，自己做个记录也希望能够用帮到别人^_^

如有不对的地方，还请各位大佬指出；