使用html2canvas将DOM转化为图片1. html2canvas绘制不出微信头像链接后台提供接口，前端在绘图时

vue中使用html2canvas将DOM转化为图片，遇到蛮多问题

1. html2canvas绘制不出微信头像链接

最近在做一个h5页面分享需要截图，用了html2canvas 这个插件，普通的图片可以显示，但是一旦是微信头像，就会出现跨域的问题，但本地谷歌浏览器可以显示，微信和qq浏览器不行。

报错信息：

html2canvas.js?c0e9:2424 171c4c55f27 3958ms Error loading image

最终解决：

后台提供接口，前端在绘图时，先将微信头像链接转换成 Base64图片，然后再进行渲染画图。

2. 动态生成的图片画不出来

原因：html2canvas截图时，不能使用跨域图片

结局：添加 useCORS: true (是否尝试使用CORS从服务器加载图像)

3. html2canvas截图不全的

原因

第一点：在保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图；

解决方案：(加上一个延时操作:setTimeout)

第二点：滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)

解决方案：(在生成截图前，先把滚动条置顶)

window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

4. 动态获取的文字数据画不出来

框中的部分截取不出来

原因： .userName,.corpName设置了超出隐藏

.userName,.corpName {
  display: -webkit-box;
  display: -moz-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: $num;
  -moz-line-clamp: $num;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

html2canvas在vue中使用

npm install --save html2canvas

import html2canvas from "html2canvas";

mounted() {
    this.sethtmlCanvas()
},
methods: {
    sethtmlCanvas() {
      let self = this;
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    
      setTimeout(() => {
        html2canvas(this.$refs.imageWrapper, {
          scale: 2,//如果是原始1，则
          useCORS: true,//是否尝试使用CORS从服务器加载图像
          allowTaint:false, //是否允许跨域图像污染画布
        }).then(function(canvas) {
           let dataURL = canvas.toDataURL("image/png");
           self.imgUrl = dataURL;
        });
      }, 500);
    },
}

参考文档