canvas-Synthetic-picture

canvas圖片合成，支援右鍵另存為

一、合成內容

1.圖片

• 背景圖
• 專屬二維碼
• 使用者頭像（圓形）

2.使用者名稱

二、專案地址

• https://github.com/StavinLi/canvas-Synthetic-picture

三、效果預覽

• https://stavinli.github.io/canvas-Synthetic-picture/
  

四、具體程式碼

<canvas width="750" height="1334" id="myCanvas"></canvas>
<script>
    var bg = {
        width: 750,
        height: 1334,
        src: "bg1.jpg"
    }
    var code = {
        width: 170,
        height: 170,
        src: "code1.png"
    }
    var userInfo = {
        name: "亦琛'",
        width: 130,
        height: 130,
        src: "user1.jpg"
    }
    var image = new Image();
    var image1 = new Image();
    var image2 = new Image();
    image.src = bg.src;
    image1.src = code.src;
    image2.src = userInfo.src;
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    image.onload = function() {
        ctx.drawImage(image, 0, 0, bg.width, bg.height);
        ctx.drawImage(image1, 305, 980, code.width, code.height);
        ctx.save();
        ctx.arc(185, 1235, 65, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(image2, 120, 1171, userInfo.width, userInfo.height); // 在剛剛裁剪的園上畫圖
        ctx.restore(); // 還原狀態
        ctx.font = "36px Georgia";
        ctx.fillStyle = '#ffffff';
        ctx.fillText(userInfo.name, 270, 1224);
    }
</script>