当前位置：首页 > news >正文

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

news 2025/8/27 11:50:45

前言

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

实现方式Demo

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="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