js实现两张图片合成一张图片(canvas绘图,图片合成)

收到一个需求把一个动态生成的二维码和页面背景图合并在一起供用户保存图片并分享朋友圈是现在邀请好友功能(微信自己的分享很容易被封).把自己遇到需要注意的点,写下来记录一下.
用两张图片的base64进行操作.
绘图代码:

$(function(){
qcodeGenert($("#url").val());
var database=$('#qrcode canvas')[0];
var dataURL = database.toDataURL();
drawAndShareImage(dataURL);
})
function drawAndShareImage(imgBase64) {
var wid1 = 750 * 0.29;//大 右
var hei1 = 1334 * 0.37;//大 下
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var ratio = getPixelRatio(context);  // 关键代码
canvas.width = 750*ratio;
canvas.height = 1334*ratio;
context.rect(0, 0, canvas.width*ratio, canvas.height*ratio);
context.fillStyle = "#fff";
context.fill();
//底图
var myImage = new Image();
myImage.src = src="${pageContext.request.contextPath}/mobileres/${actType}/images/share/share-back11.jpg";
//背景图片  你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function () {
context.drawImage(myImage, 0, 0, 750*ratio, 1334*ratio);
//如果是已经生成的Img标签可以直接使用，如果是自定义的则用下面的方法手动设置src
var myImage2 = new Image();
myImage2.src = imgBase64;
myImage2.onload = function () {
context.drawImage(myImage2, wid1*ratio, hei1*ratio, 325*ratio, 345*ratio);
var base64 = canvas.toDataURL();  //"image/png" 这里注意一下,参数里面不要带"image/png" 之前网上代码还有这个参数一直报错
var img = document.getElementById('avatar');
img.setAttribute('src', base64);
}
}
}
二维码生成代码:
function qcodeGenert(msg){

$("#qrcode").empty();

$("#qrcode").qrcode({
width: 225,
height:225,
text: msg                  //url
});
}
/* 像素密度*/   如果没这段代码生成的图片可能会模糊,这一块也耽误了很久
function getPixelRatio(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};