原由

之前有開發(fā)一個(gè)微信小程序，擁有圖片上傳的功能，上線運(yùn)行后一直表現(xiàn)良好，用戶漸漸增多。

但突然有一天，收到一個(gè)系統(tǒng)消息：提示我小程序存在內(nèi)容安全風(fēng)險(xiǎn)，缺乏對(duì)不法違規(guī)內(nèi)容的過濾機(jī)制，需要整改，消息如下圖：

該消息是安全風(fēng)險(xiǎn)警告，需要限期內(nèi)進(jìn)行整改調(diào)整，否則就會(huì)禁用小程序的一些功能，比如不能被搜索、不能通過二維碼打開小程序、不能分享小程序內(nèi)容、不能跳轉(zhuǎn)其他小程序等等。

鑒于此，小程序不進(jìn)行修改肯定是不行的，否則相關(guān)功能將不可用，搜索流量消失，影響實(shí)在有點(diǎn)大。
在進(jìn)行修改前還得先了解下微信小程序的內(nèi)容審核的具體情況，根據(jù)信息提示里的鏈接，直接查看。

內(nèi)容審核種類

在微信小程序平臺(tái)運(yùn)營規(guī)范-行為規(guī)范-內(nèi)容安全部分，提到了以下內(nèi)容：

小程序涉及未設(shè)置過濾違法、違規(guī)等不當(dāng)信息內(nèi)容的機(jī)制。
必須調(diào)用內(nèi)容安全檢測接口校驗(yàn)文本/圖片是否含有敏感內(nèi)容，提升信息安全防護(hù)能力，降低被惡意利用導(dǎo)致傳播惡意內(nèi)容的風(fēng)險(xiǎn)。

針對(duì)內(nèi)容安全，目前主要是文本輸入和圖片上傳，需要進(jìn)行內(nèi)容安全的檢測。

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

而在實(shí)際開發(fā)中，我們可以使用微信小程序提供的開放接口，對(duì)這兩塊內(nèi)容進(jìn)行基本的安全檢測：

如上圖所示，就是微信小程序提供的文本檢測接口和音頻圖片檢測接口，基于智能AI程序進(jìn)行判斷。其中圖片檢測還可以使用另外一個(gè)接口：imgSecCheck 專門用于檢測一張圖片是否違法違規(guī)。

以上接口都有多種調(diào)用方式，包括https服務(wù)、云調(diào)用以及第三方調(diào)用，本文將重點(diǎn)介紹云調(diào)用的方式，在此之前，我們需要先了解小程序云函數(shù)。

小程序云開發(fā)

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

如果要在小程序中使用云服務(wù)，則我們創(chuàng)建小程序的時(shí)候，選擇開啟微信云服務(wù)，即可：

需要明確的一點(diǎn)是，微信提供的云服務(wù)是需要收費(fèi)的，目前有1個(gè)月的試用期，可以使用。

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

針對(duì)內(nèi)容安全檢測，我們使用云調(diào)用的時(shí)候，可以使用云函數(shù)，前提是已經(jīng)搭建好云開發(fā)服務(wù)。

圖片檢測

關(guān)于圖片的檢測，使用云函數(shù)，接口方法是：openapi.security.imgSecCheck。

創(chuàng)建云函數(shù)

首先，配置代碼權(quán)限，在已開啟云服務(wù)的小程序項(xiàng)目中，會(huì)存在一個(gè) cloudfunctions 云目錄，可以右鍵單擊，創(chuàng)建云函數(shù)：

上圖所示，點(diǎn)擊 新建Node.js云函數(shù)，就能夠創(chuàng)建自己的云函數(shù)。

比如，我們創(chuàng)建一個(gè)名為 checkImageSec 的云函數(shù)，用來處理圖片檢測，則在 cloudfunctions 云目錄下會(huì)新建一個(gè)名為 checkImageSec 的文件夾，并且有自動(dòng)創(chuàng)建三個(gè)文件：

• config.json：云函數(shù)基本配置
• index.js：云函數(shù)入口執(zhí)行文件
• package.json：云函數(shù)項(xiàng)目設(shè)置及包依賴

如上圖所示，文件自動(dòng)創(chuàng)建，這里需要注意的是，在 config.json 文件中，我們得配置 openapi.security.imgSecCheck 接口權(quán)限，否則無法調(diào)用。

這里的云函數(shù)本質(zhì)上是一個(gè) Node 服務(wù)，所以開發(fā)環(huán)境電腦中必須先安裝 Node.js，云函數(shù)默認(rèn)依賴一個(gè)微信提供的包：wx-server-sdk，用于創(chuàng)建云對(duì)象。

編寫圖片檢測代碼

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

const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })

// 云函數(shù)入口函數(shù)
exports.main = async (event) => {
  const arrayBuffer = event.arrayBuffer
  const contentType = event.contentType
  const buf = Buffer.from(arrayBuffer)
  const result = await cloud.openapi.security.imgSecCheck({
    media: {
      contentType,
      value: buf
    }
  })
  return result
}

以上代碼，初始化 cloud 云對(duì)象，在入口函數(shù)中，通過參數(shù)接收?qǐng)D片信息，

arrayBuffer：圖片的 ArrayBuffer 格式二進(jìn)制數(shù)據(jù)，在Nodejs中轉(zhuǎn)為 Buffer 數(shù)據(jù)contentType：圖片的MIME媒體類型

設(shè)置好以后，就創(chuàng)建好了云函數(shù)checkImageSec， 小程序前端就能調(diào)用它對(duì)圖片進(jìn)行檢測了。

小程序圖片處理

在調(diào)用云函數(shù)之前，我們先實(shí)現(xiàn)小程序的圖片上傳功能。

圖片上傳

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

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

以上代碼，從手機(jī)相冊(cè)選擇圖片上傳，將獲取到圖片的臨時(shí)目錄地址 tempFilePath。

當(dāng)前圖片來自于相冊(cè)原始圖片，如果尺寸較大或者格式不對(duì)(如webp格式圖片等)，就并不符合我們的需求，因?yàn)閳D片安全檢測接口 imgSecCheck 對(duì)圖片尺寸和格式有要求：

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

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

圖片壓縮

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

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

以上代碼，獲取到圖片的信息 imgInfo，將包含圖片本地路徑、寬度、高度以及各式信息等，而我們縮小圖片必須使用到寬高數(shù)據(jù)。
縮小圖片，我們創(chuàng)建一個(gè)canvas元素(id為checkCanvas)，獲取對(duì)應(yīng)的上下文對(duì)象，并設(shè)置圖片寬高最大不能超過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)

// 將寬高大小設(shè)置到頁面的canvas元素(checkCanvas)上
this.smallWidth = smallWidth
this.smallHeight = smallHeight

const 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以內(nèi)后，通過小程序的canvas轉(zhuǎn)換接口 wx.canvasToTempFilePath 生成了新的臨時(shí)圖片文件，我們接下來就可以對(duì)它進(jìn)行安全檢測了。

云函數(shù)安全檢測接入

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

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

readFileSync 接口會(huì)默認(rèn)以 ArrayBuffer 格式讀取文件的二進(jìn)制內(nèi)容，這樣我們就得到了圖片文件的可用格式數(shù)據(jù)。

接著，我們就可以調(diào)用云函數(shù)，進(jìn)行檢測處理，調(diào)用方式也比較簡單：

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('檢測失敗')
  }
})

至此，我們調(diào)用云函數(shù)，進(jìn)行圖片內(nèi)容安全檢測的基本代碼都完成了，通過這種方法，能夠初步檢測圖片是否合規(guī)，禁止違規(guī)圖片上傳并顯示出來。

文本檢測

文本檢測調(diào)用云開放接口：openapi.security.msgSecCheck，整個(gè)調(diào)用的流程和圖片檢測基本一致，只不過因?yàn)閿?shù)據(jù)內(nèi)容的不同，在數(shù)據(jù)處理和參數(shù)傳遞上有一些區(qū)別。

在云函數(shù)部分(Nodejs代碼)，需要傳入 openid，通過獲取微信上下文對(duì)象(cloud.getWXContext())，可以得到openid，我們創(chuàng)建名為 checkTextSec 的云函數(shù)，核心代碼如下：

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

這里參數(shù)直接使用文本內(nèi)容，即字符串，我們?cè)谛〕绦蚯岸瞬糠终{(diào)用云函數(shù) checkTextSec，傳入文本框的輸入內(nèi)容，對(duì)文本審核檢測。

// content 輸入框文本內(nèi)容
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('處理失敗')
  }
})

以上代碼就是調(diào)用云函數(shù)處理文本內(nèi)容的安全檢測，與圖片檢測基本類似。

最后的坑

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

這里建議開發(fā)者最好進(jìn)行人工審核，以彌補(bǔ)AI智能審核的不足。

而要想進(jìn)行人工審核，必然需要上傳用戶的圖片和輸入文本，通過后臺(tái)審核干預(yù)的情形進(jìn)行處理。這個(gè)成本可以說是很大的，很多小程序做不到。
所以，當(dāng)我們的小程序因?yàn)閮?nèi)容安全被封禁以后，在找微信客服人員進(jìn)行申訴時(shí)，如果微信客服人員死扣人工審核的話，對(duì)于個(gè)人開發(fā)者來說這個(gè)小程序基本上就算玩完，可以直接棄用。

因?yàn)樯暝V失敗的概率實(shí)在太大了！

總結(jié)

到此這篇關(guān)于微信小程序圖片上傳以及內(nèi)容安全審核的文章就介紹到這了,更多相關(guān)小程序圖片上傳與審核內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論