文章目錄

• • 原由
  • 內容審核種類
  • 小程序云開發
  • 圖片檢測
  • • 創建云函數
    • • 編寫圖片檢測代碼
    • 小程序圖片處理
    • • 圖片上傳
      • 圖片壓縮
      • 云函數安全檢測接入
    • 文本檢測
  • 最后的坑

原由

之前有開發一個微信小程序，擁有圖片上傳的功能，上線運行后一直表現良好，用戶漸漸增多。
但突然有一天，收到一個系統消息：提示我小程序存在內容安全風險，缺乏對不法違規內容的過濾機制，需要整改，消息如下圖：

該消息是安全風險警告，需要限期內進行整改調整，否則就會禁用小程序的一些功能，比如不能被搜索、不能通過二維碼打開小程序、不能分享小程序內容、不能跳轉其他小程序等等。
鑒于此，小程序不進行修改肯定是不行的，否則相關功能將不可用，搜索流量消失，影響實在有點大。
在進行修改前還得先了解下微信小程序的內容審核的具體情況，根據信息提示里的鏈接，直接查看。

內容審核種類

在微信小程序平臺運營規范-行為規范-內容安全部分，提到了以下內容：

小程序涉及未設置過濾違法、違規等不當信息內容的機制。
必須調用內容安全檢測接口校驗文本/圖片是否含有敏感內容，提升信息安全防護能力，降低被惡意利用導致傳播惡意內容的風險。

針對內容安全，目前主要是文本輸入和圖片上傳，需要進行內容安全的檢測。

主要針對輸入文本或上傳的圖片中存在的色情、時政違規、暴恐等有害內容，需要進行內容審核，過濾敏感信息，確保輸入內容是安全的。

而在實際開發中，我們可以使用微信小程序提供的開放接口，對這兩塊內容進行基本的安全檢測：

如上圖所示，就是微信小程序提供的文本檢測接口和音頻圖片檢測接口，基于智能AI程序進行判斷。其中圖片檢測還可以使用另外一個接口：imgSecCheck 專門用于檢測一張圖片是否違法違規。
以上接口都有多種調用方式，包括https服務、云調用以及第三方調用，本文將重點介紹云調用的方式，在此之前，我們需要先了解小程序云函數。

小程序云開發

微信提供了云開發功能，在小程序中，我們也可以方便的建立云開發服務，協助我們快速的進行功能開發，避免搭建服務器。具體的微信云開發介紹，可以查看微信小程序開發文檔。

如果要在小程序中使用云服務，則我們創建小程序的時候，選擇開啟微信云服務，即可：

需要明確的一點是，微信提供的云服務是需要收費的，目前有1個月的試用期，可以使用。

本文的重點并不是如何搭建微信小程序云開發服務，而是針對內容安全的檢測處理，所以不再一一介紹云開發這塊的內容，網上有各種教程，大家可自行搜索。

針對內容安全檢測，我們使用云調用的時候，可以使用云函數，前提是已經搭建好云開發服務。

圖片檢測

關于圖片的檢測，使用云函數，接口方法是：openapi.security.imgSecCheck。

創建云函數

首先，配置代碼權限，在已開啟云服務的小程序項目中，會存在一個 cloudfunctions 云目錄，可以右鍵單擊，創建云函數：

上圖所示，點擊 新建Node.js云函數，就能夠創建自己的云函數。
比如，我們創建一個名為 checkImageSec 的云函數，用來處理圖片檢測，則在 cloudfunctions 云目錄下會新建一個名為 checkImageSec 的文件夾，并且有自動創建三個文件：

• config.json：云函數基本配置
• index.js：云函數入口執行文件
• package.json：云函數項目設置及包依賴

如上圖所示，文件自動創建，這里需要注意的是，在 config.json 文件中，我們得配置 openapi.security.imgSecCheck 接口權限，否則無法調用。
這里的云函數本質上是一個 Node 服務，所以開發環境電腦中必須先安裝 Node.js，云函數默認依賴一個微信提供的包：wx-server-sdk，用于創建云對象。

編寫圖片檢測代碼

我們可以在 index.js 文件中編寫所需的圖片檢測代碼，調用 openapi.security.imgSecCheck 接口，基本實現如下：

const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })// 云函數入口函數 exports.main = async (event) => {const arrayBuffer = event.arrayBufferconst contentType = event.contentTypeconst buf = Buffer.from(arrayBuffer)const result = await cloud.openapi.security.imgSecCheck({media: {contentType,value: buf}})return result }

以上代碼，初始化 cloud 云對象，在入口函數中，通過參數接收圖片信息，

• arrayBuffer：圖片的 ArrayBuffer 格式二進制數據，在Nodejs中轉為 Buffer 數據
• contentType：圖片的MIME媒體類型

設置好以后，就創建好了云函數checkImageSec， 小程序前端就能調用它對圖片進行檢測了。

小程序圖片處理

在調用云函數之前，我們先實現小程序的圖片上傳功能。

圖片上傳

小程序中圖片上傳比較簡單，直接使用文檔提供的接口 chooseMedia，用于選擇媒體文件（圖片或視頻）：

wx.chooseMedia({count,mediaType: ['image'],sizeType: [ 'original' ],sourceType: [ 'album' ],success: (imgRes) => {callBack && callBack(imgRes)},fail: () => {} })

以上代碼，從手機相冊選擇圖片上傳，將獲取到圖片的臨時目錄地址 tempFilePath。
當前圖片來自于相冊原始圖片，如果尺寸較大或者格式不對(如webp格式圖片等)，就并不符合我們的需求，因為圖片安全檢測接口 imgSecCheck 對圖片尺寸和格式有要求：

要檢測的圖片文件，格式支持PNG、JPEG、JPG、GIF，圖片尺寸不超過 750px x 1334px

所以，我們還需要對接收到的大尺寸圖片進行盡量小的壓縮。

圖片壓縮

通過前端，在小程序中進行圖片壓縮，能使用的當然就是canvas了，我們先通過 getImageInfo 接口獲取圖片的寬高信息：

wx.getImageInfo({src: tempFilePath,success: async (imgInfo) => {try {callBack && callBack(imgInfo)}},fail: () => {} })

以上代碼，獲取到圖片的信息 imgInfo，將包含圖片本地路徑、寬度、高度以及各式信息等，而我們縮小圖片必須使用到寬高數據。
縮小圖片，我們創建一個canvas元素(id為checkCanvas)，獲取對應的上下文對象，并設置圖片寬高最大不能超過120，代碼如下：

const SIZE = 120 const ratio = Math.max(imgInfo.width / SIZE, imgInfo.height / SIZE, 1) const smallWidth = Math.trunc(imgInfo.width / ratio) const smallHeight = Math.trunc(imgInfo.height / ratio)// 將寬高大小設置到頁面的canvas元素(checkCanvas)上 this.smallWidth = smallWidth this.smallHeight = smallHeightconst ctx = wx.createCanvasContext('checkCanvas') ctx.drawImage(imgInfo.path, 0, 0, smallWidth, smallHeight) ctx.draw(false, function () {setTimeout(() => {wx.canvasToTempFilePath({canvasId: 'checkCanvas',width: smallWidth,height: smallHeight,destWidth: smallWidth,destHeight: smallHeight,success: (res) => {resolve(res.tempFilePath)},fail: (e) => {reject(e)}})}, 100) })

圖片縮小到120以內后，通過小程序的canvas轉換接口 wx.canvasToTempFilePath 生成了新的臨時圖片文件，我們接下來就可以對它進行安全檢測了。

云函數安全檢測接入

上面在編寫云函數的 Node.js 代碼時，提到了圖片參數需要使用 Buffer 數據，前端圖片數據應為 ArrayBuffer 格式的數據。
圖片臨時文件，可以通過微信小程序提供的文件讀取接口，獲取對應的 ArrayBuffer 格式數據：

const fsManager = wx.getFileSystemManager() const bufferData = fsManager.readFileSync(imgFilePath)

readFileSync 接口會默認以 ArrayBuffer 格式讀取文件的二進制內容，這樣我們就得到了圖片文件的可用格式數據。

接著，我們就可以調用云函數，進行檢測處理，調用方式也比較簡單：

wx.cloud.callFunction({name: 'checkImageSec',data: {contentType: `image/png`,arrayBuffer: bufferData},success: (res) => {if (res.result.errCode === 0) {console.log('合法圖片' )} else if (res.result.errCode === 87014) {console.log('違法圖片')}console.log('其他異常')},fail: () => {console.log('檢測失敗')} })

至此，我們調用云函數，進行圖片內容安全檢測的基本代碼都完成了，通過這種方法，能夠初步檢測圖片是否合規，禁止違規圖片上傳并顯示出來。

文本檢測

文本檢測調用云開放接口：openapi.security.msgSecCheck，整個調用的流程和圖片檢測基本一致，只不過因為數據內容的不同，在數據處理和參數傳遞上有一些區別。
在云函數部分(Nodejs代碼)，需要傳入 openid，通過獲取微信上下文對象(cloud.getWXContext())，可以得到openid，我們創建名為 checkTextSec 的云函數，核心代碼如下：

exports.main = async (event) => {const wxContext = cloud.getWXContext()const openid = wxContext.OPENIDconst content = event.contentconst result = await cloud.openapi.security.msgSecCheck({openid,scene: 1,version: 2,content}) }

這里參數直接使用文本內容，即字符串，我們在小程序前端部分調用云函數 checkTextSec，傳入文本框的輸入內容，對文本審核檢測。

// content 輸入框文本內容 wx.cloud.callFunction({name: 'checkTextSec',data: { content },success: (res) => {if (res.result.errCode === 0) {if (res.result.result.label === 100) {console.log('合法文本')} else {console.log('違法文本')}} else {console.log('其他異常')}},fail: () => {console.log('處理失敗')} })

以上代碼就是調用云函數處理文本內容的安全檢測，與圖片檢測基本類似。

最后的坑

雖然，我們已經使用了微信小程序提供的開放服務，進行了圖片和文本的內容安全檢測，但是并不能完全解決問題，微信小程序開發者文檔里已有提醒：

這里建議開發者最好進行人工審核，以彌補AI智能審核的不足。
而要想進行人工審核，必然需要上傳用戶的圖片和輸入文本，通過后臺審核干預的情形進行處理。這個成本可以說是很大的，很多小程序做不到。
所以，當我們的小程序因為內容安全被封禁以后，在找微信客服人員進行申訴時，如果微信客服人員死扣人工審核的話，對于個人開發者來說這個小程序基本上就算玩完，可以直接棄用。

因為申訴失敗的概率實在太大了！

總結

以上是生活随笔為你收集整理的微信小程序 图片上传与内容安全审核的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。