JS两张图片合并成一张图片

, 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function drawAndShareImage(){
    var canvas = document.createElement("canvas");
    canvas.width = 700;
    canvas.height = 700;
    var context = canvas.getContext("2d");
 
    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();
 
    var myImage = new Image();
    myImage.src = "./2.png";    //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';
 
    myImage.onload = function(){
        context.drawImage(myImage , 0 , 0 , 700 , 700);
 
        context.font = "60px Courier New";
        context.fillText("我是文字",350,450);
 
        var myImage2 = new Image();
        myImage2.src = "./1.png";   //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';
        
        myImage2.onload = function(){
            context.drawImage(myImage2 , 175 , 175 , 225 , 225);
            var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
            var img = document.getElementById('avatar');
 
            // document.getElementById('avatar').src = base64;
            img.setAttribute('src' , base64);
        }
    }
}

安卓手机 华为 小米等canvas生成不了的问题以及长按canvas保存不了图片的问题

使用html2canvas domtoimg等合成图片 其中 安卓兼容性较高为html2canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
html2canvas(document.getElementById('posterCode'), { useCORS: true, allowTaint: true }).then(function(canvas) {
  const base64_p = canvas.toDataURL('image/png')
  const dom = document.getElementById('posterCode')
  const myImage1 = new Image()
  myImage1.src = base64_p
  myImage1.onload = function() {
  dom.innerHTML = ''
  dom.appendChild(myImage1)
  setTimeout(() => {
  that.mergeCanvas()
  }, 2000)
  }
})