canvans——合并图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lhc2207221755/article/details/80525538

前两天有这么个需求，宣传海报图，需要把海报背景图和推广人的二维码合并成一张图，之前一直是后端合成的，但是听说前端canvans也能完成，自己尝试写了下js合并，发现还是前端合成比较简单：

var resultImg=new Image();
resultImg.id="resultImg";
resultImg.width=147;
resultImg.height=246;
resultImg.crossOrigin = "Anonymous";

let bgImg=new Image();
bgImg.id="bgImg";
bgImg.src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1338529944,1756098076&fm=27&gp=0.jpg";
bgImg.width=147;
bgImg.height=246;
bgImg.crossOrigin = "Anonymous";
//document.body.appendChild(bgImg);
let qrImg=new Image();
qrImg.id="qrImg";
qrImg.src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3316827274,529484043&fm=27&gp=0.jpg";
qrImg.width=40;
qrImg.height=40;
qrImg.crossOrigin = "Anonymous";

var drawing = document.createElement('canvas');
drawing.id="drawing";
drawing.width=147;
drawing.height=246;
drawing.style.position = "absolute";

if (drawing.getContext){
  let context = drawing.getContext('2d');
  context.drawImage(bgImg,0,0,147,246);
  context.drawImage(qrImg,0,0,40,40);
}
//let resultUrl=drawing.toDataURL("image/png").replace("image/png", "image/octet-stream");
let resultUrl=drawing.toDataURL("image/png");
//window.location.href=resultUrl;
resultImg.src=resultUrl;
document.body.appendChild(resultImg);