小程序内容安全检测图片过大的解决方法

目前微信官方对小程序的内容安全审核越发严格，几乎只要涉及到输入框或者图片选择按钮都需要接入内容安全审核，不然都没办法通过审核。文本检测很简单，只要将文字直接提交到云端进行检测就可以了，但是在接入图片的时候总会有一些问题。

今天主要说一下图片审核中由于图片过大导致审核失败的问题，官方的规定要检测的图片文件，格式支持PNG、JPEG、JPG、GIF，图片尺寸不超过 750px x 1334px，图片大小限制为1M，但是随着现在随便一张图可能都有好几M，从而导致无法审核。

主要办法就是将需要审核的图片进行压缩，用压缩后图片去提交审核，审核通过后再去对原图进行处理。可以在后端压缩图片也可以在小程序端直接压缩，这里推荐直接在前端压缩后再提交给后端，在前端压缩一般都是通过canvas来完成，这里写一个利用wx.createOffscreenCanvasAPI来进行图片压缩。

/**
 * 压缩图片
 */
compressImage: function(imageUrl) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: imageUrl,
        success: res => {
          const height = res.height * 300 / res.width;
          const offscreenCanvas = wx.createOffscreenCanvas({
            type: '2d',
            width:300,
            height
          })
          const context = offscreenCanvas.getContext('2d')
          const image = offscreenCanvas.createImage()
          image.src = imageUrl;
          image.onload = () => {
            context.clearRect(0, 0, 300, height)
            context.drawImage(image, 0, 0, 300, height)
            const imageBase64 = offscreenCanvas.toDataURL("image/jpeg",0.7)
            const base64 = imageBase64.replace(/^data:image\/\w+;base64,/, "")
            resolve(base64)
          }
        }
      })
    })
  }

上述代码中，我们直接使用promise封装了这个方法，这样就可以在任何地方直接异步调用这个压缩方法，我们只需要提供一个图片地址（这个地址可以是网络地址也可以是本地临时地址），就会返回一张宽度为300px的等比图片的base64码，我们可以直接将它提交给后端进行审核。当然这里我是固定了宽度，如果你想要将图片压缩的更小（不过不建议太小，不然图片太过模糊可能会导致审核准确性出问题），或者稍微大一点可以将宽度作为形参传入，代码如下：

/**
 * 压缩图片
 */
compressImage: function(imageUrl,width) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: imageUrl,
        success: res => {
          const height = res.height * width / res.width;
          const offscreenCanvas = wx.createOffscreenCanvas({
            type: '2d',
            width,
            height
          })
          const context = offscreenCanvas.getContext('2d')
          const image = offscreenCanvas.createImage()
          image.src = imageUrl;
          image.onload = () => {
            context.clearRect(0, 0, width, height)
            context.drawImage(image, 0, 0, width, height)
            const imageBase64 = offscreenCanvas.toDataURL("image/jpeg",0.7)
            const base64 = imageBase64.replace(/^data:image\/\w+;base64,/, "")
            resolve(base64)
          }
        }
      })
    })
  }

这里我们需要提供两个参数尽可以使用这个压缩图片的方法了，如下：

let imageBase64 = await this.compressImage(imageUrl,width)

其中imageUrl为图片地址，width为想要压缩的宽度。这样得到的imageBase64就是压缩后图片的base64编码了。

小程序内容安全检测图片过大的解决方法

猜你喜欢