• 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的图片也完美生成了

      

    实际项目中遇到的问题,在这记录下,希望对大家有所帮助

  • 相关阅读:
    用C#一次匹配HTML代码中A的链接和文字的方法
    去黑头的7个必胜秘方
    用C#写外挂或辅助工具必须要的WindowsAPI
    用C#把HTML内容转为UBB的方法
    Windows Server 2008 Standard, Enterprise, and Datacenter with Service Pack 2
    xmpp协议分析
    查看Win7的真实版本号方法
    什么是游戏NP?如何在NP下读写游戏内存及如何进入NP进程
    C#正则表达式扫盲 保证 10分钟入门 30分钟精通[绝对不可错过的文章]
    可扩展消息出席协议(XMPP):核心 RFC 3920
  • 原文地址:https://www.cnblogs.com/sjs355/p/7991570.html
Copyright © 2020-2023  润新知