Canvas跨域問題較完美解決方案（解決測試、生産環境差異的跨域問題）

近日在做需求時遇到需要Canvas處理後下載下傳圖檔功能，因圖檔為筒内圖檔，是以在本地、測試、生産環境均存在跨域問題

話不多說，先上代碼

1. Canvas允許使用跨域圖檔

//初始化canvas
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	//建立一個圖檔
	var img = new Image();
	// 解決圖檔的跨域問題
	img.crossOrigin = "Anonymous";
	img.src = '圖檔url';
	img.onload = function () {
	    ctx.drawImage(img,0,0);
	    //開心的開始畫圖
	}
           

截止以上代碼，本地和測試環境都可以完美解決跨域的問題，畫完圖檔，開心部署，然而，

生成環境報錯，百思不得解，經四方尋問查閱，得到一下解決方案，先看代碼

1. 解決方案

//定義一個限制參數
	var imgDownloadNum = 0;
	function imgDownload(timeStamp) {
	    if(timeStamp == null || timeStamp ==undefined){ var timeStamp = ''}
		//初始化canvas
	    var c = document.getElementById("myCanvas");
	    var ctx = c.getContext("2d");
	    var img = new Image();
	    // 解決圖檔的跨域問題
	    img.crossOrigin = "Anonymous";
	    //其實大部分時候到此問題已解決
	    img.src = '圖檔url' + '?' + timeStamp ;
	    img.onerror = function(){
	    	//報錯時向連結後添加一個随機參數
	        var timeStamp = new Date();
	        imgDownloadNum += 1
	        if (imgDownloadNum <= 10) {
	            imgDownload(timeStamp)
	        } else {
	            //跳出循環
	            alert（'繪制失敗'）
	        }
	    }
	    img.onload = function () {
	        ctx.drawImage(img,0,0);
	        //開心的開始畫圖
	    }
	}
           

可以看到，我們在連結尾部添加一個随機參數重新請求即可解決大部分情況下出現的跨域問題，具體解決原理參考下面文章

作者：zzppff

參考文章連結：https://www.jianshu.com/p/454b288d4aa5

部分原創方法，參考部落格見上連結，商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

如有其它問題，可聯系公衆号：