前端实现两张图片合成，图片换背景，简单p图程序

news2024/9/23 11:22:10

前言

最近在自己做一个图文工具网站，图片背景替换功能，后台通过opencv的AI算法抠出了图片主元素，现在需要把抠出来的元素换一个背景色，或者合成到一张背景图片中，如何操作呢？
在这里插入图片描述

实现方式Demo

我考虑的是使用Canvas的绘图功能，建立一个Canvas对象，先将背景图片绘制上去，然后在把图片绘制上去。我的项目中是直接绘制颜色纯色的颜色块，不过原理是一样的。
代码Demo如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片合成-demo</title>
  </head>
  <body>
    <div>
      <img id="cute_cat" src="./image.png" alt="猫猫"  crossorigin="anonymous"/>
      <img id="bgImg" src="./bg.jpg" alt="背景"  crossorigin="anonymous"/>
      <img id="cute_cat_bgImg" alt="合成图片"  crossorigin="anonymous"/>
    </div>
    <button onclick="drawPosterImage()">测试图片合成</button>
  </body>
</html>
<script>
  const qrcodeHTML = document.getElementById("cute_cat");
  const posterHTML = document.getElementById("bgImg");

  /**
   * 获取图片
   * @param imageHTML{HTMLElement} 对应的图片Html
   * @return {Promise<unknown>}
   */
  function readImage(imageHTML,resolve) {
    // return new Promise(resolve => {
    const Image1 = new Image();
    Image1.src = imageHTML.getAttribute("src");

    return new Promise((resolve) => {
      Image1.onload = function () {
        resolve(Image1);
      };
    });
  }

  const drawPosterImage = async function () {
    const canvas = document.createElement("canvas");
    // 海报模板的宽高
    const posterW = (canvas.width = posterHTML.offsetWidth);
    const posterH = (canvas.height = posterHTML.offsetHeight);
    posterHTML.clientHeight;

    // 获取了一个 2D 渲染上下文，用于在 canvas 元素上进行绘图操作。
    const context = canvas.getContext("2d");
    // 使用 rect() 方法绘制一个矩形
    context.rect(0, 0, canvas.width, canvas.height);
    // 设置了矩形的填充颜色为白色
    context.fillStyle = "#fff";
    // 使用fill()方法填充矩形，将矩形以指定的颜色进行填充
    context.fill();

    // 获取#poster图片
    const image2 = await readImage(posterHTML);
    context.drawImage(image2, 0, 0, posterW, posterH);
    // 获取#qrcode图片
    const image1 = await readImage(qrcodeHTML);
    context.drawImage(image1, 0, 0, qrcodeHTML.width, qrcodeHTML.height); // qrcode定位,根据需求修改

    // 获取canvas base64的图片流
    const base64 = canvas.toDataURL("image/png");
    document.getElementById("cute_cat_bgImg").setAttribute("src", base64);
  };
</script>

合成前：
在这里插入图片描述
合成后：

是不是很nice