在App内用canvas合成二维码加背景图兼容ios安卓

2 篇文章 0 订阅
1 篇文章 0 订阅

在写分享海报时候,需要用canvas合成图片,一开始安卓上架后正常,但是ios上线则合不成,最后发现有跨域问题,如果是线上图片需要设置允许跨域或者转化下,都要是base64的在ios线上才能成功,如果不需要ios兼容,则本地图片都可以,百度上都可以找到转化方法,不过apicloud相比有很多模块,简单些,但是逻辑还是不变的,供参考!!!
1、生成二维码,用到了qrcode.js方法,引入qrcode.js,为了兼容ios,转化成了base64

function aff() {
				var linka = '链接'
				var code = new QRCode(document.getElementById("qrcode"), {
					text: linka,
					width: 256,
					height: 256,
					typeNumber: 4,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.L
				});
				 let canvas = code._el.querySelector("canvas");//获取生成二维码中的canvas,并将canvas转换成base64
				base64Text = canvas.toDataURL("image/png");
			});
		

2、开始将图片和二维码合成,最好都转为base64的,兼容ios

			var canvas = document.createElement("canvas"); //创建画布
			canvas.width = 750; //画布宽度
			canvas.height = 1334; //画布高度
			var goodInvitationSharePic = canvas.getContext("2d");
			var img = new Image();
			var trans = api.require('trans');//apicloud开发可用模块转base64,其他的可用js生成base64
			trans.decodeImgToBase64({
			    imgPath: '../../images/wxfx/'+ Index +'.png'
			}, function(ret, err) {
			    if (ret.status) {
				   img.src = "data:image/png;base64," + ret.base64Str; //分享商品背景图
				   img.onload = function() {
				   	goodInvitationSharePic.drawImage(img, 0, 0, 750, 1334);//添加背景图的位置
				   	 imgtwo = new Image();
				   	  imgtwo.src=base64Text;
				   	  imgtwo.onload = function(){
				   		  goodInvitationSharePic.drawImage(imgtwo, 274, 1018, 202, 202); //添加二维码的位置
				   		  var createImg = canvas.toDataURL("image/png");
				   		  document.getElementById('imga').setAttribute("src", createImg)
				   		  createImg = createImg.replace('data:image/png;base64,', '');
				   		  document.getElementById('imgaa').src = "data:image/png;base64," + createImg//合成完了,可以赋值到页面上,分享出去的话可以把base64转化为本地图片
				   		  var trans = api.require('trans');
				   		  trans.saveImage({
				   		  	base64Str: createImg,
				   		  	imgPath: "fs://img/",
				   		  	imgName: Index + ".png"
				   		  }, function(ret, err) {
				   		  	if (ret.status) {
				   		  	} else {
				   		  		api.toast({
				   		  			msg: '请稍后重试',
				   		  			duration: 3000,
				   		  			location: 'middle'
				   		  		});
				   		  	}
				   		  });
				   	  }
				   	
				   	
				   }
			    } else {
			       
			    }
			});
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值