html2canvas爬坑

背景情况：由于项目需要，需在点击按钮时触发一个弹窗，将弹窗内的东西绘制成图片供用户保存到本地。弹窗内有图片有文字，当弹窗的图片为类似于http://www.test.com/xxx/xxx.jpg的网络路径时会提示跨域错误。

1、首先设置useCORS: true,有的人会同时设置allowTaint。其实没有必要，这两个会互相覆盖的，设置一个就成。

2、设置跨域域名proxy：'图片域名'’

3、服务器端设置允许跨域 Access-Control-Allow-Origin: *，如果是oss上的图片，需要到oss控制台设置访问权限，可自行百度，但是大部分都是允许跨域的吧，根据自己情况看吧。

4、最最最最…重要的一点，这也是导致博主卡了有接近一天的坑。
检查你的网络图片路径最后是.jpg(png,jpeg…)等图片格式结尾。
因为楼主是从oss上取的图片，进行了压缩的参数设置，类似于这样：

https://xxxx.xxx.xx/xxx/12212cecf85.jpg?x-oss-process=image/resize,w_750

根据上面设置了参数后，其实只要这样就可以完成绘制了。

https://xxxx.xxx.xx/xxx/12212cecf85.jpg

5、如果以上操作后依然不能成功绘制，可根据以下思路进行操作：

1）、将网络图片转化为base64（网上很多现成的代码）
2）、将转化为base64后的网络图片替换掉原来的图片
3）、再将整张图进行html2canvas绘制

附上我这个问题参数配置的源码：

		html2canvas(this.$refs.imageWrapper, {
          useCORS: true,
          scrollY: 0,
          scrollX: 0,
          backgroundColor: null,
          scale: 2,
          logging: false,
          allowTaint: false,
          proxy: 'https://xxxxx.com'
        }).then(function(canvas) {
          var image = new Image();
          image.src = canvas.toDataURL("image/png");
          image.className = 'canvasImg';
          let pNode = document.querySelector('#dialog_box_canvas');
          let canvasDom = document.getElementById('dialog_canvas_dom');
          canvasDom.style.display = 'none';
          pNode.appendChild(image);
        })

爬坑二（网络图片绘制不出来）：
接着上面，绘制成功后博主愉快的回家恰饭睡觉觉，今天早上开开心心打开电脑，一测，wc，又出现跨域错了啊啊啊啊啊啊啊。

于是经过多方信息汇总发现，oss上的图片会有个缓存机制，而那种缓存机制会影响咱脆脆弱弱的html2canvas。。。。

解决办法： 咱们只需要不让它缓存就好了呀，于是乎，将需要绘制的网络图片img路径改为：<img :src="shareUrl+'?'+new Date().getTime()" crossorigin="anonymous">（这是vue的写法，也可以用模板字符串，自己怎么喜欢怎么来，反正解决办法就是后面加个随机字符串或者随机数就可以了）解决。

爬坑三（chrome模拟器没问题但在ios端网络图片绘制不出来）：
ennnn~ ，继图片绘制成功后又产生一个问题，在chrome模拟器里面是完全没问题的，一放到ios里面就又绘制不出来，大概就是整个图片，链接了远程图片的地方是空白的而本地图片均绘制成功。

解决办法：
在远程图片加载出来再调取绘制方法，或者给绘制的方法设置一个几百毫秒的延时。

爬坑四（绘制的图片发生偏移）：
用html2canvas绘制完图片后，始终会有个偏移距离，之前的解决办法是设scrollY: 0,scrollX: 0这两个参数为0，但是这次怎么弄都不行，最后排查出的原因是因为绘制的box上加了transform:translateX(-50%)这个样式。

解决办法：
不用transform来定位，换一种没有偏移的方式，比如设置百分比或者固定宽高。