canvas图片问题和移动端iOS系统onload事件失效的问题

canvas图片问题

做的一个项目需要将两张图片合成一张图片输出，想到可以用canvas来实现图片的合成

 var self = this;
var codeImg = document.getElementById("qrcode").getElementsByTagName("img")[0];
var bgImg = document.createElement("img");
			
codeImg.setAttribute("crossOrigin", 'anonymous');
bgImg.setAttribute("crossOrigin", 'anonymous');

var canvas = document.getElementById("myCanvas");
			canvas.width = "375";
			canvas.height = '667';
var ctx = canvas.getContext("2d");
    ctx.rect(0,0,375,667);
    ctx.fillStyle = '#fff';
    ctx.fill(); 

通过canvas合成图片有一个要注意的技术点，就是获取的img元素，需要设置属性img.setAttribute("crossOrigin","anonymous")
不设置该属性的话，就会出现错误如下：

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

实际代码中我有两张图片，一张图片是本地图片显示的，另外一张图片是通过请求服务器接口url显示的。
上面的那个错误已经解决，却出现了另外一个错误。

这个问题的出现，显然是跨域限制所导致的。可是我将图片设置属性img.setAttribute("crossOrigin","anonymous"),难道是图片是请求服务器拿到的url,在本地服务器出现的跨域问题？
经过断点测试，果然是这个坑。然后让运营的同事配置一下请求接口加上Access-Control-Allow-origin:*，要 OSS 和 CDN 均配置跨域允许。
再重新运行，错误没有了。

移动端iOS系统onload事件失效的问题

在这个图片合成的过程中，有一个问题就是由于有一个图片是需要请求服务器显示的，所以，在用canvas合成的过程中，需要判断服务器已经下载完成显示后，才进行ctx.drawImage()，否则就会出错。这就需要通过onload事件在判断图片是否加载完成

                        bgImg.src = self.imgsrc;
                        bgImg.addEventListener('load',function() {
				self.isShow = true;
				ctx.drawImage(bgImg,0,0,375,667);
				ctx.drawImage(codeImg,270,568,90,90);

				imgURL = canvas.toDataURL("image/png");
				var img = new Image();
				document.getElementById("imgWrap").appendChild(img);
				img.src = imgURL;
				self.finalSrc = imgURL;
				img.style.width = 100 + '%';
				img.style.height = 100 + '%';
				canvas.style.display = "none";
			})

安装上面代码的执行顺序，在chorme,firefox浏览器上都可以正常合成图片输出的，然后在ios手机设配上测试的时候，居然不进入onload这个方法里面.
google了一下，确实是，用到了 window.onload ，在这个事件发生时初始化，然后在 iOS webview 上这个事件不触发，其他人也遇到了。却没有找到解决方法。

但是bgImg.src = self.imgsrc;放在onload事件的后面，这个问题就给绕过去了。

其中的原因我也不是很清楚，大概是iOS需要等待图片onload事件执行完成，才能操作改图片的src。以后找到该原因后再补上。