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();

請在服務器上測試, 避免因跨域問題無法上線。