canvas图片文字自动合成---微信朋友圈图片分享

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

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>