JS圖片拼接方法

话不多说上代码

function splice(){
    var canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 800;
    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, 800 , 800); // 横纵坐标和宽高大小, 因为是背景图, 这里设定为铺满

        context.font = "60px Sumsun";
        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); // 横纵坐标和宽高大小
            let base64 = canvas.toDataURL("image/png");  // "image/png" 这里注意一下
            let img = document.getElementById('avatar'); // 图片放置到的dom位置

            // document.getElementById('avatar').src = base64;
            img.setAttribute('src' , base64);
        }
    }
}

splice();

请在服务器上测试, 避免因跨域问题无法上线。