Vue中使用openlayers，将地图导出为图片，原本使用openlayers官方提供的方法加载地图，但是地图加载太慢了，换成天地图后无法导出图片并报错

【问题原因】

使用天地图后，没有解决跨域问题，所以图片导出失败

【解决方式】

添加 crossOrigin:'anonymous' ，处理跨域问题

let tiandiditu = new Tile({
	source: new XYZ({
			crossOrigin:'anonymous',
			url: '',
	}),
});
                    【背景】Vue中使用openlayers，将地图导出为图片，原本使用openlayers官方提供的方法加载地图，但是地图加载太慢了，换成天地图后无法导出图片并报错【问题原因】使用天地图后，没有解决跨域问题，所以图片导出失败【解决方式】添加 crossOrigin:'anonymous'，处理跨域问题let tiandiditu = new Tile({	source: new XYZ({			crossOrigin:'anonymous',			url: '',	}),});.
				
报错详尽信息
Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
    canvas.toDataURL()
    crossOrigin
    Access-Control-Allow-Origin
最近在做一个创意类的图片合成工具，大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能，项目中用到了fabric.js这个画板库，最后一步在保存图片的时候报上面的一长串错误，墙内墙外
					
Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
				
Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
解决方案：url前面一定要加http://
				
使用wpaint绘图软件时：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
一句话总结：通过删除法和最简单模式找错，发现是styl...
				
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
一句话总结：解决方案是图片设置crossOrigin属性
图片设置 ：crossOrigin属性代码片段：img.setAttribute("crossOr...
				
1.情景展示
　　当使用canvas 将图片转为base64报错信息如下：
　　 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
2.解决方案
　　第一种情况：本地测试&图片引自本地
解决方案：将文件配置在https环境下就能正常运行
部分手机打开摄像头以后是黑屏，但是拍照仍然可以成像
解决方案：做了很多处理都没用，最后发现只要把参数中的分辨率（width,height）删除掉，就解决了黑屏问题
前置摄像头调用后镜像问题
解决方案：
1.可以给video标签直接设置transfrom:rotate(180deg)；
2.通过给API...
				
js报错 Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
在用IDEA时，调用getImageData()报跨域的错误，原因是图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错。
搜索了很多方法尝试解决，包括：
设置时间戳
var img
				
html页面截图 html2canvas学习html2canvas介绍demo遇到的问题
html2canvas介绍
html2canvas是一个js插件，可以非常简单的帮我实现html截图
npm install html2canvas
官方给的简单的例子
这个例子适应的html2canvas  ^1 的版本
html2canvas(document.body).then(fun...