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

这篇具有很好参考价值的文章主要介绍了【微信小程序5】利用canvas实现纯色背景抠图功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

canvas怎么抠图,Mob移动端实践笔记,微信小程序,小程序

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

一、实现逻辑

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

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

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

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

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

二、代码实现

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

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

<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文章来源地址https://www.toymoban.com/news/detail-790806.html

到了这里，关于【微信小程序5】利用canvas实现纯色背景抠图功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！