微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

博主： BWmelon
发布时间：2021 年 01 月 30 日
297次浏览
1 条评论
7415字数
分类： js

事情经过是这样的，这段时间在开发一个二维码美化小程序，昨天中午修复了一个bug后提交给微信审核，晚上收到审核结果后惊呆了，居然没有通过，毕竟自己只是增加了一个setTimeout方法，看到驳回原因后觉得还是挺有意思的：

![小程序驳回原因截图][1]

看完之后理解了，小程序审核人员在小程序里面上传了张18禁图片，然后告诉我，你这样不行啊，怎么能不进行图片鉴黄呢，万一带坏了小盆友该怎么办。那为什么之前的审核你都给通过了？第一次做图片工具类的小程序，还真是没想到审核会有这波操作。行吧行吧，看在你是腾讯的份上（其实是鉴黄接口不收费，虽然云函数超过免费额度后会收费，但是价格还能接受），你要加就给你加呗。

![马化腾][2]

# 1、准备工作

> security.imgSecCheck文档：[https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.imgSecCheck.html][3]

看了一下security.imgSecCheck文档，发现调用图片内容安全识别接口有两种方式，第一种是通过HTTPS 调用，第二种是云调用。虽然第一种可以通过直接请求接口调用，但是需要使用access_token，个人感觉还是比较麻烦的，所以选择了云调用。

使用云调用第一步就是需要开通云开发功能，具体开通流程这里就不进行描述了，选择免费的就行（顺带吐槽一下云开发开始割韭菜啦，具体可以参考别人写的文章：[小程序云开发新版套餐解读][4]）。

# 2. 配置云开发

由于这个小程序之前在创建的时候没有勾选云开发，所以需要自己配置一下。

首先是在根目录下的`project.config.json`中设置云函数目录：

```json
"cloudfunctionRoot": "cloud/"
```

然后在根目录下创建`cloud`文件夹，创建完成后，这个文件夹右下角会带有一个云图标：

![创建云函数文件夹](https://imgs.bwmelon.com/20210131111323484.png)

# 3、创建云函数

在微信开发者工具中右击刚才创建的文件夹，点击新建Node.js云函数，创建一个新的云函数，我这边创建的云函数名称是imgSecCheck，然后在这个云函数目录下的`config.json`中配置api权限：

```json
{
  "permissions": {
    "openapi": [
      "security.imgSecCheck"
    ]
  }
}
```

# 4、编写云函数

由于这个小程序中的图片是在本地进行编辑和保存，不需要上传到服务器，所以直接将图片直接传给接口就行了，在imgSecCheck目录下的`index.js`文件中编写云函数：

```js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'your env'
})

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    const res = await cloud.openapi.security.imgSecCheck({
      media: {
        contentType: 'image/png',
        value: Buffer.from(event.value)
      }
    })
    return res
  } catch (error) {
    return error
  }
}
```

其中`env`的值可以在开发者工具-云开发-设置-环境ID中拿到，然后将这个云函数进行上传：

![上传云函数](https://imgs.bwmelon.com/20210131114217356.png)

# 5、小程序端调用

上传完成后即可在小程序端调用，下方为从相册选取图片后进行图片内容安全识别的一个demo：

```js
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
    success(res) {
        const src = res.tempFilePaths[0]
        wx.getFileSystemManager().readFile({
            filePath: src,
            success: buffer => {
                wx.showLoading({
                    title: '图片合规性检查中', 
                    mask: true
                })
                wx.cloud.callFunction({
                    name: 'imgSecCheck', // 之前创建的云函数名称
                    data: {
                        value: buffer.data // 传入的值
                    }
                }).then(res => {
                    wx.hideLoading()
                    if (res.result.errCode === 87014) {
                        wx.showToast({
                            title: '图片违规，请重新上传其他图片',
                            icon: 'none'
                        })
                    } else if (res.result.errCode === 0) {
                        // 图片内容正常 TODO
                    } else {
                        wx.showToast({
                            title: '检测出错，错误码为：' + res.result.errCode,
                            icon: 'none'
                        })
                    }
                }).catch(error => {
                    wx.hideLoading()
                    console.log(error)
                    wx.showToast({
                        title: `检测出错，请重试`,
                        icon: 'none'
                    })
                })
            }
        })
    }
})  
```

# 6、遇到问题

编写完小程序端代码后，使用起来很顺利，看官方描述图片大小限制为1m，然后用PS生成了一张5M左右的图片上传识别，本来准备看一下超过大小限制后的报错信息，没想到云函数正确返回了数据，完美，提交代码。

提交后使用真机测试体验版，发现怎么上传都没有用，然后使用真机调试看了一下报错信息：

![云函数调用报错](https://imgs.bwmelon.com/20210131120953940.png)

看了一会[云开发错误码](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference/errcode.html)后没有得到有效的信息，以为是图片大小超过了1M，便多尝试了几张图片，发现结果都是一样的，直到上传了一张几乎为纯白色的图片接口才返回数据。计算了一下这些图片的大小，发现只有几十k大小的图片才有几率能被接口识别，超过100k大小的图片都是报错。文档中说好的图片大小限制为1m呢？

# 7、更换实现方法

在经历了一系列百度搜索后，自己依旧没有找到问题的解决办法（有知道问题所在原因的小伙伴还希望在评论区指导一下），便决定更换一种实现方法，先将图片上传到云端，然后然云函数在云端下载上传后的图片进行识别。

# 8、开通存储功能

在微信开发者工具-云开发-存储中开通云存储功能，然后新建一个temp文件夹：

![开通云存储功能](https://imgs.bwmelon.com/20210131122643969.png)

# 9、修改小程序端代码

先将图片上传，获取到文件id后传给云函数：

```js
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
    success(res) {
        const src = res.tempFilePaths[0]
        wx.showLoading({
            title: '上传中',
            mask: true
        })
        wx.cloud.uploadFile({
            // 指定上传到的云路径
            cloudPath: 'temp/' + new Date().getTime() + "-" + Math.floor(Math.random() * 1000),
            // 指定要上传的文件的小程序临时文件路径
            filePath: src,
            // 成功回调
            success: res => {
                wx.hideLoading()
                const fileID = res.fileID
                wx.showLoading({
                    title: '图片合规性检查中',
                    mask: true
                })
                wx.cloud.callFunction({
                    name: 'imgSecCheck', // 之前创建的云函数名称
                    data: {
                        value: fileID // 传入的值
                    }
                }).then(res => {
                    wx.hideLoading()
                    if (res.result.errCode === 87014) {
                        wx.showToast({
                            title: '图片违规，请重新上传其他图片',
                            icon: 'none'
                        })
                    } else if (res.result.errCode === 0) {
                        // 图片内容正常 TODO
                    } else {
                        wx.showToast({
                            title: '检测出错，错误码为：' + res.result.errCode,
                            icon: 'none'
                        })
                    }
                }).catch(error => {
                    wx.hideLoading()
                    console.log(error)
                    wx.showToast({
                        title: `检测出错，请重试`,
                        icon: 'none'
                    })
                })
            },
            fail: error => {
                wx.hideLoading()
                console.log(error)
                wx.showToast({
                    title: '图片上传出错，请重试',
                    icon: 'none'
                })
            }
        })
    }
})
```

# 10、修改云函数

云函数首先拿到文件id下载文件，然后再进行图片内容识别。由于我这边图片用完后不需要保存，所以在识别完成后将图片删除，以免占用过多的免费存储空间：

```js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'your env'
})

// 云函数入口函数
exports.main = async (event, context) => {
  const file = await cloud.downloadFile({
    fileID: event.value
  })

try {
    const res = await cloud.openapi.security.imgSecCheck({
      media: {
        contentType: 'image/png',
        value: file.fileContent
      }
    })

cloud.deleteFile({
      fileList: [event.value]
    })

return res
  } catch (error) {
    return error
  }
}
```

# 11、体验

最终效果可以扫描下方小程序码，然后在自定义二维码-自定义背景图-生成图片中体验。

![二维码美化扫码体验](https://imgs.bwmelon.com/20210131142456069.jpg)

[1]: https://imgs.bwmelon.com/20210130223314139.png
[2]: https://imgs.bwmelon.com/202101302257149.png
[3]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.imgSecCheck.html
[4]: https://developers.weixin.qq.com/community/develop/article/doc/00062688754b70b3729b11bae51813

最后修改：2021 年 01 月 31 日 02 : 29 PM

如果觉得我的文章对你有用，请随意赞赏

1 条评论

ac2
April 27th, 2021 at 11:50 am

礼品网一家专业代发平台，ab单，快递单号提供平台。http://www.lpbo.cn

回复

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

有回复时邮件通知我

ac2
礼品网一家专业代发平台，ab单，快递单号提供平台。http:/...
qf3
0.1元快递单号网一毛钱快递代发空包网站真实代发网站www...
奈何
生成成功，二维码链接不正常，已搭配博主的短连接
奈何
使用不了
mie
这个真的太棒了，希望博主能出一个去掉短网址生成接口，去掉二维码...

微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

BWmelon • 2021 年 01 月 30 日

![小程序驳回原因截图][1]

![马化腾][2]

# 1、准备工作

> security.imgSecCheck文档：[https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.imgSecCheck.html][3]

# 2. 配置云开发

由于这个小程序之前在创建的时候没有勾选云开发，所以需要自己配置一下。

首先是在根目录下的`project.config.json`中设置云函数目录：

```json
"cloudfunctionRoot": "cloud/"
```

然后在根目录下创建`cloud`文件夹，创建完成后，这个文件夹右下角会带有一个云图标：

![创建云函数文件夹](https://imgs.bwmelon.com/20210131111323484.png)

# 3、创建云函数

```json
{
  "permissions": {
    "openapi": [
      "security.imgSecCheck"
    ]
  }
}
```

# 4、编写云函数

```js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'your env'
})

其中`env`的值可以在开发者工具-云开发-设置-环境ID中拿到，然后将这个云函数进行上传：

![上传云函数](https://imgs.bwmelon.com/20210131114217356.png)

# 5、小程序端调用

上传完成后即可在小程序端调用，下方为从相册选取图片后进行图片内容安全识别的一个demo：

# 6、遇到问题

提交后使用真机测试体验版，发现怎么上传都没有用，然后使用真机调试看了一下报错信息：

![云函数调用报错](https://imgs.bwmelon.com/20210131120953940.png)

# 7、更换实现方法

# 8、开通存储功能

在微信开发者工具-云开发-存储中开通云存储功能，然后新建一个temp文件夹：

![开通云存储功能](https://imgs.bwmelon.com/20210131122643969.png)

# 9、修改小程序端代码

先将图片上传，获取到文件id后传给云函数：

```js
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
    success(res) {
        const src = res.tempFilePaths[0]
        wx.showLoading({
            title: '上传中',
            mask: true
        })
        wx.cloud.uploadFile({
            // 指定上传到的云路径
            cloudPath: 'temp/' + new Date().getTime() + "-" + Math.floor(Math.random() * 1000),
            // 指定要上传的文件的小程序临时文件路径
            filePath: src,
            // 成功回调
            success: res => {
                wx.hideLoading()
                const fileID = res.fileID
                wx.showLoading({
                    title: '图片合规性检查中',
                    mask: true
                })
                wx.cloud.callFunction({
                    name: 'imgSecCheck', // 之前创建的云函数名称
                    data: {
                        value: fileID // 传入的值
                    }
                }).then(res => {
                    wx.hideLoading()
                    if (res.result.errCode === 87014) {
                        wx.showToast({
                            title: '图片违规，请重新上传其他图片',
                            icon: 'none'
                        })
                    } else if (res.result.errCode === 0) {
                        // 图片内容正常 TODO
                    } else {
                        wx.showToast({
                            title: '检测出错，错误码为：' + res.result.errCode,
                            icon: 'none'
                        })
                    }
                }).catch(error => {
                    wx.hideLoading()
                    console.log(error)
                    wx.showToast({
                        title: `检测出错，请重试`,
                        icon: 'none'
                    })
                })
            },
            fail: error => {
                wx.hideLoading()
                console.log(error)
                wx.showToast({
                    title: '图片上传出错，请重试',
                    icon: 'none'
                })
            }
        })
    }
})
```

# 10、修改云函数

```js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'your env'
})

// 云函数入口函数
exports.main = async (event, context) => {
  const file = await cloud.downloadFile({
    fileID: event.value
  })

try {
    const res = await cloud.openapi.security.imgSecCheck({
      media: {
        contentType: 'image/png',
        value: file.fileContent
      }
    })

cloud.deleteFile({
      fileList: [event.value]
    })

return res
  } catch (error) {
    return error
  }
}
```

# 11、体验

最终效果可以扫描下方小程序码，然后在自定义二维码-自定义背景图-生成图片中体验。

![二维码美化扫码体验](https://imgs.bwmelon.com/20210131142456069.jpg)

微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

1 条评论

发表评论取消回复

宝塔面板安装NodeJS程序并配置https教程

qq、wx、支付宝三合一收款码

基于handsome主题的一些美化修改

通过js识别解析二维码

使用jquery-pjax实现网站无刷新总结

一个易支付nodejs版sdk

域名更换啦

qq、wx、支付宝三合一收款码

微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

宝塔面板安装NodeJS程序并配置https教程

微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

1 条评论

发表评论 取消回复

微信小程序接入图片内容安全（鉴黄）imgSecCheck功能

发表评论取消回复