前言
最近在自己做一个图文工具网站，图片背景替换功能，后台通过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