【微信小程序5】利用canvas实现纯色背景抠图功能

Bertha 。 2024-03-16 16:40 37阅读 0赞

最近，在小程序开发过程中，遇到了需要设置背景透明效果功能的需求。如果借助百度开放接口实现抠图功能是非常方便的，但是一个最大的缺点就是需要money支持。不得已，参考网上各家代码，实现了借助canvas来实现纯色背景抠图功能。只是非常简单的一个应用，先看效果：

![5fc05b1d6aea4a7f9cb67bdb7b73d9ef.png][]

好，下面我们来梳理下逻辑，同时完成代码的编写。

### 一、实现逻辑 ###

1、准备好一张纯色背景的图片（我设置的剔除白色背景的）。

2、把该图片绘制到canvas上（保持大小比例不变）。

3、对canvas上的每个像素进行扫描，把像素是白色背景的透明度设置为透明

4、把设置完成的图像再重新绘制到canvas上

5、完成。背景色设置成透明。

### **二、代码实现** ###

现在根据实现逻辑，我们来编写代码，具体如下：

1、在wxml文件中，添加canvas标签。（class样式不展示了，这是自定义的）

2、添加一个按钮事件，来实现剔除图片背景颜色。

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][https_download.csdn.net_download_m0_60318025_87894106]

[5fc05b1d6aea4a7f9cb67bdb7b73d9ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3350ca35dadb417bab7ede5a80cc30d8.png
[https_download.csdn.net_download_m0_60318025_87894106]: https://download.csdn.net/download/m0_60318025/87894106