一、可用于生成一个类似于微信的个人名片或做一些海报

drawAndShareImage(imgSrc1, imgSrc2) { 
    //imgSrc1 背景图片（二维码）链接
    //imgSrc2 小图片（头像）链接
    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 = imgSrc1; //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = () => {
        context.drawImage(myImage, 0, 0, 700, 700);
        var myImage2 = new Image();
        myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';

        myImage2.onload = () => {
            // 设置填充的颜色
            context.fillStyle = "white";
            // 绘制填充的矩形
            context.fillRect(250, 250, 210, 210);
            context.drawImage(myImage2, 260, 260, 190, 190);
            var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
            // 获取图片容器
            var myImg = document.getElementById('myImg');
            myImg.src = base64;
        }
    }
}

二、合成多张图片

示例：如果是这样有规律的合成图片，可以直接用示例代码中的数组循环。如果是想要自由调整位置，就需要一个一个去新建，然后调整

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <img id="myImg" width="500px" src="" alt="">
  </div>
  <script>
  let src1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668137717&t=44c0114e3f029d9fc02045f7604d3a17"
  let src2 = "http://t15.baidu.com/it/u=2027854191,2160613474&fm=224&app=112&f=JPEG?w=240&h=240"
  let src3 = "http://t14.baidu.com/it/u=1222460544,2890239708&fm=224&app=112&f=JPEG?w=500&h=500"
  let src4 = "http://t14.baidu.com/it/u=2969192949,3648643824&fm=224&app=112&f=JPEG?w=478&h=500"
  let src5 = "http://t13.baidu.com/it/u=1763821927,1950161827&fm=224&app=112&f=JPEG?w=500&h=500"
  let src6 = "http://t13.baidu.com/it/u=1064126021,1678889867&fm=224&app=112&f=JPEG?w=500&h=500"
  let arr = [src2,src3,src4,src5,src6]
  function drawAndShareImage(imgSrc1, arr) { 
      //imgSrc1 背景图片（二维码）链接
      //arr 合成的小图片的数组[链接1,链接2.....]
      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 = imgSrc1; //背景图片  你自己本地的图片或者在线图片
      myImage.crossOrigin = 'Anonymous';

      myImage.onload = () => {
          context.drawImage(myImage, 0, 0, 700, 700);
          // 示例：如果合成图片的位置有规律，就可以 循环传入的数组
          // 如果想要自由的合成图片，那就需要 重复的进行新建，逐个调整位置
          arr.forEach((item,index)=>{
            let myImage2 = new Image();
            myImage2.src = item; //你自己本地的图片或者在线图片
            myImage2.crossOrigin = 'Anonymous';

            myImage2.onload = () => {
                // 设置填充的颜色
                context.fillStyle = "white";
                
                // 区分每一个图片的位置
                let left = 0
                let top = 0
                if(index%2==0){
                  left=0
                  top=150*Math.floor(index/2)
                }else{
                  left=200
                  top=150*Math.floor(index/2)
                }

                // 绘制填充的矩形
                context.fillRect(150+left, 150+top, 110, 110);
                // 绘制图片
                context.drawImage(myImage2, 160+left, 160+top, 90, 90);
                var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                // 获取图片容器
                var myImg = document.getElementById('myImg');
                myImg.src = base64;
            }
          })
          
      }
  }
  drawAndShareImage(src1,arr)
  </script>
</body>
</html>

# javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟