在写分享海报时候,需要用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 {
}
});