实现思路

H5这边想实现这个功能的话主要还是得靠canvas,利用canvas相关的api实现对图片的RGBA通道的透明度修改从而达到图片背景的透明的效果，使用场景多见于印章提取等应用场景。

效果

第一步：标签样式部分

canvas标签在uni中是有默认宽高的，如果有需要就手动设置宽高

<canvas id="mCanvas" canvas-id="mCanvas" class="mCanvasClass"></canvas>

.mCanvasClass {
    width: 100px;
    height: 100px;
}

第二步：获取Canvas上下文环境

首先data中定义相关变量，并在onReady中获取。

data() {
    return {
        mCanvas:{},
    }
}
   
  onReady() {
      this.mCanvas = uni.createCanvasContext('mCanvas')
}

第三步：通过canvas提供的api进行图像处理并导出

start() {
  let _this = this
  let canvasName = 'mCanvas'
  let w = 200
  let h = 200
  //提取图像RGBA通道颜色值，每连续四个为一个像素点，分别代表RGBA
  uni.canvasGetImageData({
    canvasId: canvasName,
    x: 0,
    y: 0,
    width: w,
    height: h,
    success(res) {
      let pxData = res.data
      let yz = 150
      for (let i = 0; i < pxData.length; i += 4) {
        if (
            pxData[i] > yz &&
            pxData[i + 1] > yz &&
            pxData[i + 2] > yz
        ) {
          pxData[i] = 255;
          pxData[i + 1] = 255;
          pxData[i + 2] = 255;
          pxData[i + 3] = 0;
        }
      }
      //先清空画布后再并绘制，否则使用同一个画布会导致重复绘制 
      _this.mCanvas.clearRect(0, 0, w, h)
      _this.mCanvas.draw()
      //把处理好的像素点放回到画布中
      uni.canvasPutImageData({
        canvasId: canvasName,
        x: 0,
        y: 0,
        width: w,
        height: h,
        data: pxData,
        success(res) {
          // 如需要提取请执行以下方法
          uni.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: w,
            height: h,
            destWidth: w,
            destHeight: h,
            canvasId: canvasName,
            success: (res) => {
              //可以利用此base64
              let url = _this.parseBlob(res.tempFilePath)
              console.log(url)
              //可以利用此url上传至服务器
            }
          })
        },
        fail(res) {
        }
      })
    }
  })
}