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);
	    //开心的开始画图
	}

截止以上代码，本地和测试环境都可以完美解决跨域的问题，画完图片，开心部署，然而，
生成环境报错，百思不得解，经四方寻问查阅，得到一下解决方案，先看代码

2. 解决方案

	//定义一个限制参数
	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
部分原创方法，参考博客见上链接，商业转载请联系作者获得授权，非商业转载请注明出处。
如有其它问题，可联系公众号：