[JavaScript知识库]html2canvas 图片跨域与截取高德地图

图片跨域解决方案：

在进行图片保存的时候经常会发现图片跨域了

看它的请求，可以看到它本身就没有做跨域的相关配置

解决方案：
1.首先把html2canvas更新至最新版本
链接：前往下载最新
设置html2canvas跨域

backgroundColor: null,
useCORS: true,
allowTaint: true

2.设置图片跨域
添加 crossorigin=“anonymous” 属性

<img crossorigin="anonymous" />

3.添加随机数
添加完刷新发现图片显示不出来，需要添加随机数，如：

<img crossorigin="anonymous"  :src="url +'?'+new Date().getTime()"/>

到这再进行图片打印就不会出现跨域问题了！
html2canvas代码

html2canvas(this.$refs.imageWrapper, {
   backgroundColor: null,
   useCORS: true,
   allowTaint: true,
   }).then(canvas => {
   let dataURL = canvas.toDataURL("image/png");
   printJS({ printable: dataURL, type: 'image', documentTitle: projectConfig.title }) //printJS打印
});

截取高德地图：

在地图初始化时设置

new AMap.Map('map',{
  WebGLParams:{
      preserveDrawingBuffer:true
  }
})
//设置后就可以截取图片

然后用html2canvas截取完后就可以直接打印了！