html2canvas2+openlayers6+arcgis导出图片提示画布被污染（已解决）

业务场景：导出map页留作存档

出现的问题：openlayers接入arcgis 服务正常显示 ，但是使用html2canvas2导出的时候显示画布被污染

代码片段：

//初始化地图
function initMap() {
				// 地图实例
			     map.value = new Map({
					target: 'map', // 对应页面里 id 为 map 的元素
					layers: [ // 图层
						// 接入wms服务
						new ImageLayer({
							source: new ImageWMS({ // 使用瓦片渲染方法
								 url:'http://localhost:6080/arcgis/services/test/test/ImageServer/WMSServer', // 图层数据源
								ratio: 1,
							}),
							opacity: 1
						})

					],
					view: new View({ // 地图视图
						projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
						center: origi_point.value,
						//minZoom: 10, // 地图缩放最小级别
						zoom: 10 // 地图缩放级别（打开页面时默认级别）
					})
				})
			}
// 导出为图片
			function exportImg() {
				html2canvas(unref(gisBox), {
					width: unref(gisBox).getBoundingClientRect().width,
					height: unref(gisBox).getBoundingClientRect().height,
					backgroundColor: "null", //背景颜色 为null是透明
					dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
					scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
				}).then(canvas => {
					var url = canvas.toDataURL()
					var a = document.createElement("a");
					a.download = "地图";
					var event = new MouseEvent("click");
					a.href = url;
					a.dispatchEvent(event)
				});
			}

这种导出的时候会提示画布被污染，canvas无法执行toDataURL方法

于是想到了使用跨域，来让canvas正常执行todataurl方法

//初始化地图
function initMap() {
				// 地图实例
			     map.value = new Map({
					target: 'map', // 对应页面里 id 为 map 的元素
					layers: [ // 图层
						// 接入wms服务
						new ImageLayer({
							source: new ImageWMS({ // 使用瓦片渲染方法
								 url:'http://localhost:6080/arcgis/services/test/test/ImageServer/WMSServer', // 图层数据源
								ratio: 1,
                                crossOrigin: 'anonymous',//允许跨域
							}),
							opacity: 1
						})

					],
					view: new View({ // 地图视图
						projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
						center: origi_point.value,
						//minZoom: 10, // 地图缩放最小级别
						zoom: 10 // 地图缩放级别（打开页面时默认级别）
					})
				})
			}
// 导出为图片
			function exportImg() {
				html2canvas(unref(gisBox), {
					width: unref(gisBox).getBoundingClientRect().width,
					height: unref(gisBox).getBoundingClientRect().height,
					backgroundColor: "null", //背景颜色 为null是透明
					dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
					scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
                    useCORS: true, //是否使用CORS从服务器加载图像
				}).then(canvas => {
					var url = canvas.toDataURL()
					var a = document.createElement("a");
					a.download = "地图";
					var event = new MouseEvent("click");
					a.href = url;
					a.dispatchEvent(event)
				});
			}

使用了跨域之后，新的问题又出现了，arcgis发布的服务没有设置响应头，请求arcgis服务的时候又出现跨域，导致无法正常显示地图了，于是从给arcgis服务设置响应头入手，后面功夫不负有心人，找到一篇文章 笔记【一】：MapBox 加载 ArcGIS 的WMS 服务跨域问题解决 | 凌往昔GIS

按照博主的所述方法，修改本地的arcgis服务的xml后，重启arcgis服务，刷新了一下，就可以正常导出页面拉