canvas生成圖片的跨域問題

在做一個項目的分享時，要調用客戶端的分享方法，需要生成一個base64的圖片，遇到一個比較奇怪的問題，用canvas繪制圖片的時候，會報錯，部分代碼和錯誤如下

//分享微信
function shareWx(shareType){
	var type = "weixin";//分享類型--->微信分享
	var base64Image="";
	var c=document.getElementById("myCanvas");//創建幕布
	var ctx=c.getContext("2d");
	var img = new Image();//加載底圖圖片
	var img2= new Image();//加載要拼裝的圖標

　　

//動植物等級提升的分享
	}else if(shareType=='newLevel'){
		chineNameSch(chineName);//初始化動植物中文全稱
		var plantName = chineName.get(petCode);;//動植物的中文名稱
		var length=plantName.length;//得得到字符串的長度，用來居中
       	img.src="shareImages/cz.jpg";
       	img2.src=app25.newLevelImage;//圖片的路徑
	  	img.onload = function(){
	  		ctx.drawImage(img,0,0,750,1334);
	  		ctx.font="40px Arial"
	  		ctx.fillStyle='#FFFF00';
	  		if(length==5){
	  			ctx.fillText(plantName,255,775);
	  		}else{
	  			ctx.fillText(plantName,310,775);
	  		}
	  		ctx.drawImage(img2,220,450,300,300);
	  		commonShaer(type,base64Image);
		}

　　

function commonShaer(type,base64Image){
	var myCanvas = document.getElementById("myCanvas");
	var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
	var strs= new Array(); //定義一數組 
	strs=image.split(";base64,"); //字符分割 
	base64Image=strs[1];
   
	var u = navigator.userAgent, app = navigator.appVersion;
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)
    {
    	window.woxin.wxShareBase64Image(type,base64Image);//安卓分享圖片js方法 
    }
    else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))
    {
    	wxShareBase64Image(type,base64Image); //iOS分享圖片js方法
    }
    //用戶升級領取金幣
    getGrowupPrizeByshareNew("growup20","");
}

　　

上網查資料是這么說的

原來是存在跨域問題，只需要在加一句代碼，就完美解決了

else if(shareType=='newLevel'){
		chineNameSch(chineName);//初始化動植物中文全稱
		var plantName = chineName.get(petCode);;//動植物的中文名稱
		var length=plantName.length;//得得到字符串的長度，用來居中
       	img.src="shareImages/cz.jpg";
       	img2.src=app25.newLevelImage;//圖片的路徑
       	// 解決圖片的跨域問題
       	img2.crossOrigin = "Anonymous";
	  	img.onload = function(){
	  		ctx.drawImage(img,0,0,750,1334);
	  		ctx.font="40px Arial"
	  		ctx.fillStyle='#FFFF00';
	  		if(length==5){
	  			ctx.fillText(plantName,255,775);
	  		}else{
	  			ctx.fillText(plantName,310,775);
	  		}
	  		ctx.drawImage(img2,220,450,300,300);
	  		commonShaer(type,base64Image);
		}

base64的圖片也完美生成了

　　

實際項目中遇到的問題，在這記錄下，希望對大家有所幫助