0


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

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

今天主要说一下图片审核中由于图片过大导致审核失败的问题,官方的规定要检测的图片文件,格式支持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编码了。

标签: 小程序 安全 前端

本文转载自: https://blog.csdn.net/qq_39653624/article/details/129849060
版权归原作者 袁代码 所有, 如有侵权,请联系我们删除。

“小程序内容安全检测图片过大的解决方法”的评论:

还没有评论