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的图片也完美生成了
实际项目中遇到的问题,在这记录下,希望对大家有所帮助