小程序中的图片检测流程（微信小程序心得）

最新推荐文章于 2024-08-28 22:05:10 发布

挪威的浆果

最新推荐文章于 2024-08-28 22:05:10 发布

阅读量2.5k

点赞数 36

分类专栏：原生微信小程序开发问题文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/gumengcheng/article/details/136543982

版权

本文详细介绍了在移动端应用中，如何通过前端压缩图片Buffer并利用微信和阿里云的图片审核API进行传输，包括使用微信的`imgSecCheck`接口、`concatenateArrayBuffers`函数，以及利用Canvas进行图片压缩的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上集说到图文安全的审核，展开讲了一下文字的审核，图片一笔带过。这集来看看图片在前后端的传输。

在做图片审核的时候，不管是微信自带的接口还是阿里的图片审核，都有一个核心宗旨。就是校验的图片，保证清晰的情况下，越小越好。为了达到这个目的，必须要处理图片压缩的问题，

做UGC内容，用户上传的图片，如果是手机拍的照片，基本会在5M以上，使用其他更高端的设备图片会更大。

以上是开发中面临的问题，下面来解决问题。

显然，可以从前端和后端两个方向去尝试解决压缩图片这个问题。

从后台的接口讲起吧，首先是微信自带的api，security.imgSecCheck。

cloud.openapi.security.imgSecCheck({
  media: {
    contentType: 'image/jpeg',
    value: compressedBuffer
  }
});

格式统一选择jpg，value需要的是文件的Buffer，一次检测一张图。我们就需要一个图片buffer的数组来做一个Promise.all 的操作。

查看一下图片的文件Buffer 可以用过 wx.getFileSystemManager() 的 readFile api来写：

readFileAsync(filePath) { 
  return new Promise((resolve, reject) => {
    const fileSystemManager = wx.getFileSystemManager();
    fileSystemManager.readFile({
      filePath,
      success(res) {
        // buffer
        resolve(res.data);
      },
      fail(res) {
        reject("读取文件失败");
      }
    });
  });
}

// 封装成promise 异步调用

const arrayBuffer = await that.readFileAsync(res.tempFilePath);

然后看下tempFilePath怎么去取好点，结合业务，用户上传的图片最终展示的话要是高清图，这里上传的时候就必须是高清图也就是原图。

图片Buffer有了，照道理直接调用接口传给后台就好了，但是实际操作后发现一个新的问题，如果直接传多张图片的Buffer，接口传输的data大小严重超标了。官方也给出了解决方案，