最近，在小程序开发过程中，遇到了需要设置背景透明效果功能的需求。如果借助百度开放接口实现抠图功能是非常方便的，但是一个最大的缺点就是需要money支持。不得已，参考网上各家代码，实现了借助canvas来实现纯色背景抠图功能。只是非常简单的一个应用，先看效果：
好，下面我们来梳理下逻辑，同时完成代码的编写。
一、实现逻辑
1、准备好一张纯色背景的图片（我设置的剔除白色背景的）。
2、把该图片绘制到canvas上（保持大小比例不变）。
3、对canvas上的每个像素进行扫描，把像素是白色背景的透明度设置为透明
4、把设置完成的图像再重新绘制到canvas上
5、完成。背景色设置成透明。
二、代码实现
现在根据实现逻辑，我们来编写代码，具体如下：
1、在wxml文件中，添加canvas标签。（class样式不展示了，这是自定义的）
扫描二维码关注公众号，回复：
16923943 查看本文章
<canvas id="myCanvas" type="2d" class="mv-cvs"></canvas>2、添加一个按钮事件，来实现剔除图片背景颜色。
<button bindtap="clickBgd">背景透明</button>3、在clickBgd中编写抠图代码：
clickBgd() {
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext("2d")
const image = canvas.createImage()
// const dpr = wx.getSystemInfoSync().pixelRatio
let that = this
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
let width = 300
let height = 150
console.log("width2:", width, ",height2:", height);
ctx.drawImage(image, 0, 0, width, height)
const imgDt = ctx.getImageData(0, 0, width, height)
const data = imgDt.data
for (let i = 0; i < data.length; i += 4) {
let r = data[i + 0]
let g = data[i + 1]
let b = data[i + 2]
data[i + 0] = 255
data[i + 1] = 0
data[i + 2] = 0
if ([r, g, b].every(v => v > 80 && v < 256)) {
data[i + 3] = 0
}
}
//清除画布之前的图片
ctx.clearRect(0, 0, 360, 360)
//创建新的图片数据
let nimgdt = canvas.createImageData(data, width, height)
ctx.putImageData(nimgdt, 0, 0)
//转成png格式的图片
let dtUrl = canvas.toDataURL("image/png")
console.log("dataurl:", dtUrl);
that.setData({
imgsrc: dtUrl,
})
}
// 设置要剔除背景色的图片src
image.src ="picture.jpg";
})
},三、完整代码
具体完整代码链接：https://download.csdn.net/download/m0_60318025/87894106