云開發(fā) 圖像處理和OCR

2020-07-22 15:32 更新

云調(diào)用有些接口屬于AI服務(wù)的范疇，比如借助于人工智能來進行智能裁剪、掃描條碼/二維碼、圖片的高清化等圖像處理和識別銀行卡、營業(yè)執(zhí)照、駕駛證、身份證、印刷體、駕駛證等OCR，有了這些接口我們也能在小程序里使用人工智能了。接下來我們以小程序的條碼/二維碼識別和識別印刷體為例來介紹一下云調(diào)用。

一、圖像處理

使用開發(fā)者工具新建一個云函數(shù)，如scancode，然后在config.json里添加img.scanQRCode云調(diào)用的權(quán)限，使用npm install安裝依賴之后，上傳并部署所有文件（此時也會更新權(quán)限）。

  1. {
  2.   "permissions": {
  3.     "openapi": [
  4.       "img.scanQRCode"
  5.     ]
  6.   }
  7. }

然后再在index.js里輸入以下代碼，注意cloud.openapi.img.scanQRCode方法和img.scanQRCode權(quán)限的對應(yīng)寫法，不然會報604100的錯誤。

  1. const cloud = require('wx-server-sdk')
  2. cloud.init({
  3.     env: cloud.DYNAMIC_CURRENT_ENV
  4.   })
  5. exports.main = async (event, context) => {
  6.   try {
  7.     const result = await cloud.openapi.img.scanQRCode({
  8.       imgUrl:"https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/qrcodetest.png" //注意二維碼必須是條碼/二維碼，不能是小程序碼
  9.   })
  10.     return result
  13.   } catch (err) {
  14.     console.log(err)
  15.     return err
  16.   }
  17. }

調(diào)用該云函數(shù)之后，返回的result對象里包含result對象，在codeResults的data里可以得到二維碼里包含的內(nèi)容。

  1. codeResults: [{
  2.   data: "使用云開發(fā)來開發(fā)微信小程序可以免費。。。",
  3.   pos: {leftTop: {…}, rightTop: {…}, rightBottom: {…}, leftBottom: {…}},typeName: "QR_CODE"}]
  4. errCode: 0
  5. errMsg: "openapi.img.scanQRCode:ok"
  6. imgSize: {w: 260, h: 260}

二、OCR人工智能識別

使用開發(fā)者工具新建一個云函數(shù)，如ocrprint，然后在config.json里添加ocr.printedText云調(diào)用的權(quán)限，使用npm install安裝依賴之后，上傳并部署所有文件（此時也會更新權(quán)限）。

  1. {
  2.   "permissions": {
  3.     "openapi": [
  4.       "ocr.printedText"
  5.     ]
  6.   }
  7. }

調(diào)用該云函數(shù)之后，返回的result對象里包含result對象，在codeResults的data里可以得到二維碼里包含的內(nèi)容。

  1. const cloud = require('wx-server-sdk')
  2. cloud.init({
  3.     env: cloud.DYNAMIC_CURRENT_ENV
  4.   })
  5. exports.main = async (event, context) => {
  6.   try {
  7.     const result = await cloud.openapi.ocr.printedText({
  8.         imgUrl: 'https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/ocrprint.png'
  9.   })
  10.     console.log(result)
  11.     return result
  12.   } catch (err) {
  13.     console.log(err)
  14.     return err
  15.     }
  16. }

調(diào)用該云函數(shù)之后，返回的result對象里包含result對象，在的items里可以返回圖片包含的文字內(nèi)容。

  1. items: Array(4)
  2. 0: {text: "JavaScript入門", pos: {…}}
  5. 1: {text: "JavaScript是目前世界上最流行的編程語言之一，它也是小程序開發(fā)最重要的基礎(chǔ)語言。要做出一個功能復(fù)雜的小程序，除了需要掌握JavaScript的基本語", pos: {…}}
  8. 2: {text: "法，還要了解如何使用JavaScript來操作小程序(通過API接口)", pos: {…}}
  11. 3: {text: "過API接口)。", pos: {…}}

三、圖像處理拓展能力

圖片是小程序非常重要的元素，尤其是旅游照片、社交圖片、電商產(chǎn)品圖片、相冊類小程序、媒體圖文等，圖片的加載速度、清晰度、圖片的交互、圖片效果的處理以及圖片加載的CDN消耗都是一個不得不需要去關(guān)注的問題。而云開發(fā)圖像處理拓展能力結(jié)合云存儲則可以非常有效的解決很多問題。

強烈建議所有有圖片處理需求的用戶都應(yīng)該安裝圖像處理拓展能力，這個能力大大彌補和增強了云存儲在圖片處理能力，尤其是圖片按照需求的規(guī)格進行縮放可以大大減少CDN的消耗以及圖片的加載速度以及我們可以按照不同的業(yè)務(wù)場景使用快速縮略模板，而這一切的操作和云存儲的結(jié)合都是非常實用且易用的。

1、圖像處理能力介紹

云開發(fā)圖像處理能力結(jié)合的是騰訊云數(shù)據(jù)萬象的圖片解決方案，圖像處理提供多種圖像處理功能，包含智能裁剪、無損壓縮、水印、格式轉(zhuǎn)換等，圖像處理拓展能力所包含的功能非常豐富，使用如下圖片處理的費用是按量計費的，計費周期為月，10TB以內(nèi)免費，超出10TB，按0.025元/GB 來計費，省事而便宜：

  • 縮放：等比縮放、設(shè)定目標(biāo)寬高縮放等多種方式；

  • 裁剪：普通裁剪、縮放裁剪、內(nèi)切圓、人臉智能裁剪；

  • 旋轉(zhuǎn)：普通旋轉(zhuǎn)、自適應(yīng)旋轉(zhuǎn)；

  • 格式轉(zhuǎn)換：jpg、bmp、gif、png、webp、yjpeg格式轉(zhuǎn)換，gif 格式優(yōu)化，漸進顯示功能；

  • 質(zhì)量變換：針對 JPG 和 WEBP 圖片進行質(zhì)量變換；

  • 高斯模糊：對圖片進行模糊處理；

  • 銳化：對圖片進行銳化處理；

  • 圖片水印：提供圖片水印處理功能；

  • 文字水?。禾峁崟r文字水印處理功能；

  • 獲取圖片基本信息：查詢圖片基本信息，包括格式、長、寬等；

  • 獲取圖片EXIF：查詢圖片 EXIF 信息，如照片的拍攝參數(shù)、縮略圖等；

  • 獲取圖片主色調(diào)：獲取圖片主色調(diào)信息；

  • 去除元信息：去除圖片元信息，減小圖像體積；

  • 快速縮略模板：快速實現(xiàn)圖片格式轉(zhuǎn)換、縮略、剪裁等功能，生成縮略圖；

  • 管道操作符：對圖片按順序進行多種處理

當(dāng)我們在騰訊云云開發(fā)網(wǎng)頁控制臺(注意要使用微信公眾號的方式登錄)
添加完圖像處理的拓展能力之后，我們可以在騰訊云的數(shù)據(jù)萬象存儲桶里看到云開發(fā)的云存儲，
而關(guān)于圖像處理能力的深入使用，也可以參考騰訊云數(shù)據(jù)萬象的技術(shù)文檔。

在小程序云開發(fā)里使用圖像處理能力的方法有三種：

  • 圖像地址的拼接，只需要在圖片的下載地址url里拼接一些簡單的參數(shù)（API管道操作符），就能夠使用到圖像處理的能力，非常方便易用，這個不會把圖片處理的結(jié)果存儲到云存儲，不會占用云存儲的空間；在獲取圖片基本信息、獲取圖片 EXIF、獲取圖片主色調(diào)等方面非常方便；

  • 在前端（小程序端）做持久化圖像處理，支持有結(jié)果圖輸出的處理操作，也就是我們可以把縮放、裁剪、格式轉(zhuǎn)換、質(zhì)量變換等處理之后的圖片存儲到云存儲方便以后使用；

  • 在云函數(shù)端做持久化圖像處理，支持有結(jié)果圖輸出的處理操作

2、圖像地址的拼接

在了解圖像處理能力之前，我們需要先了解一下云存儲文件的fileID、下載地址以及下載地址攜帶的權(quán)限參數(shù)sign（圖像處理能力的參數(shù)拼接就是基于下載地址的），如下圖所示：

在安裝了圖像處理拓展能力的情況下，我們可以直接拿云存儲的下載地址進行拼接，拼接之后的鏈接我們既可以在小程序里使用，也可以用于圖床，比如原始圖片下載地址為：

  1. https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049

而相關(guān)的圖像處理能力的拼接案例如下，具體的操作可以看技術(shù)文檔，實際的效果，可以復(fù)制粘貼鏈接到瀏覽器或小程序里體驗（換成自己的地址），注意拼接方式就是在下載地址后面加了一個&imageMogr2/thumbnail/!20p（注意這里由于已經(jīng)有了一個sign參數(shù)，所以拼接時用的是$，不能寫成?，否則不會生效），直接就可以啦，非常易用：

  1. //將圖片等比例縮小到原來的20%
  2. https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p

后面為了方便，我們將https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049簡寫為download_url:

  1. //縮放寬度，高度不變，下面案例為寬度為原圖50%，高度不變
  2. download_url&imageMogr2/thumbnail/!50px
  5. //縮放高度，寬度不變，下面案例為高度為原圖50%，寬度不變
  6. download_url&imageMogr2/thumbnail/!x50p
  9. //指定目標(biāo)圖片的寬度（單位為px），高度等比壓縮，注意下面的是x，不是px，p與x在拼接里代表著不同的意思
  10. download_url&imageMogr2/thumbnail/640x
  13. //指定目標(biāo)圖片的高度（單位為px），寬度等比壓縮：
  14. download_url&imageMogr2/thumbnail/x355
  17. //限定縮略圖的寬度和高度的最大值分別為 Width 和 Height，進行等比縮放
  18. download_url&imageMogr2/thumbnail/640x355
  21. //限定縮略圖的寬度和高度的最小值分別為 Width 和 Height，進行等比縮放
  22. download_url&imageMogr2/thumbnail/640x355r
  25. //忽略原圖寬高比例，指定圖片寬度為 Width，高度為 Height ，強行縮放圖片，可能導(dǎo)致目標(biāo)圖片變形
  26. download_url&imageMogr2/thumbnail/640x355!
  29. //等比縮放圖片，縮放后的圖像，總像素數(shù)量不超過 Area
  30. download_url&imageMogr2/thumbnail/150000@
  33. //取半徑為300，進行內(nèi)切圓裁剪
  34. download_url&imageMogr2/iradius/300
  37. //取半徑為100px，進行圓角裁剪
  38. download_url&imageMogr2/rradius/100
  41. //順時針旋轉(zhuǎn)90度
  42. download_url&imageMogr2/rotate/90
  45. //將jpg格式的原圖片轉(zhuǎn)換為 png 格式
  46. download_url&imageMogr2/format/png
  49. //模糊半徑取8，sigma 值取5，進行高斯模糊處理
  50. download_url&imageMogr2/blur/8x5
  53. //獲取圖片的基礎(chǔ)信息，返回的是json格式，我們可以使用https請求來查看圖片的format格式,width寬度、height高度，size大小，photo_rgb主色調(diào)
  54. download_url&imageInfo

3、小程序端持久化圖像處理

當(dāng)我們希望把縮放、裁剪、旋轉(zhuǎn)、格式變換等圖像處理的結(jié)果（也就是處理之后的圖片）存儲到云存儲，這個就叫做持久化圖像處理，在安裝了圖像處理能力之后，我們也可以在小程序端做圖像處理。

當(dāng)用戶把原始圖片上傳到小程序端時，我們需要對該圖片進行一定的處理，比如圖片過大就對圖片進行裁剪縮?。槐热鐖D片需要進行一定的高斯模糊、旋轉(zhuǎn)等處理，這些雖然在圖像處理之前，也是可以使用js來做的，但是小程序端圖像處理的效果并沒有那么好或者過于復(fù)雜，使用圖像處理的拓展能力就非常實用了。

在小程序端構(gòu)建圖像拓展依賴

首先在開發(fā)者工具小程序根目錄（一般為miniprogram)，右鍵“在終端中打開”，然后在終端里輸入以下代碼，也就是在小程序端安裝圖像拓展依賴，安裝完時，我們就可以在miniprogram文件夾下看到node_modules：

  1. npm install --save @cloudbase/extension-ci-wxmp@latest

然后點擊開發(fā)者工具工具欄里的工具-構(gòu)建npm，構(gòu)建成功之后，就可以在miniprogram文件夾下看到minprogram_npm里有@cloubase文件夾，里面有extension-ci-wxmp，說明圖像拓展依賴就構(gòu)建完成。

在小程序端進行圖像處理

使用開發(fā)者工具新建一個imgprocess的頁面，然后在imgprocess.wmxl里輸入如下代碼，我們新建一個button按鈕：

  1. <button bindtap="imgprocess">處理圖片</button>

然后再在imgprocess.js的Page()函數(shù)的上面（外面）引入圖像處理依賴，代碼如下：

  1. const extCi = require("./../../miniprogram_npm/@cloudbase/extension-ci-wxmp");

然后再在imgprocess.js的Page()函數(shù)的里面寫一個imgprocess的事件處理函數(shù)，點擊button之后會先執(zhí)行readFile()函數(shù)，也就是獲取圖片上傳到小程序臨時文件的結(jié)果（是一個對象），然后再調(diào)用imageProcess()函數(shù)，這個函數(shù)會對圖片進行處理，圖片會保存為tcbdemo.jpg，而處理之后的圖片會保存為image_process文件夾下的tcbdemo.png，相當(dāng)于保存了兩張圖片：

  1. async imgprocess(){
  2.   const readFile = async function() {
  3.     let res = await new Promise(resolve=>{
  4.         wx.chooseImage({
  5.             success: function(res) {
  6.                 let filePath = res.tempFilePaths[0]
  7.                 let fm = wx.getFileSystemManager()
  8.                 fm.readFile({
  9.                     filePath,
  10.                     success(res){
  11.                         resolve(res)
  12.                     }
  13.                 })
  14.             }
  15.         })
  16.     })
  17.     return res
  18.   }
  19.   let fileResult = await readFile(); //獲取圖像的臨時文件上傳結(jié)果
  20.   const fileContent = fileResult.data  //獲取上傳到臨時文件的圖像，為Uint8Array或Buffer格式
  21.   async function imageProcess() {
  22.     extCi.invoke({
  23.       action: "ImageProcess",
  24.       cloudPath: "tcbdemo.jpg", // 圖像在云存儲中的路徑，有點類似于wx.cloud.uploadFile接口里的cloudPath，上傳的文件會保存為云存儲根目錄下的hehe.jpg
  25.       operations: {
  26.         rules: [
  27.           {
  28.             fileid: "/image_process/tcbdemo.png", //將圖片存儲到云存儲目錄下的image_process文件夾里，也就是我們用image_process存儲處理之后的圖片
  29.             rule: "imageMogr2/format/png", // 處理樣式參數(shù)，我們可以在這里寫圖片處理的參數(shù)拼接
  30.           }
  31.         ]
  32.       },
  33.       fileContent
  34.     }).then(res => {
  35.         console.log(res);
  36.     }).catch(err => {
  37.         console.log(err);
  38.     })
  39.   }
  40.   await imageProcess()
  41. }
  • 可能你的開發(fā)者工具會報以下錯誤：https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中，請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html，這個要按照參考文檔將鏈接加入到合法域名當(dāng)中，不然不會生成圖片；

  • action是操作類型，它的值可以為：ImageProcess圖像處理，DetectType圖片安全審核（后面會介紹），WaterMark圖片忙水印、DetectLabel圖像標(biāo)簽等。

  • operations是圖像處理參數(shù)，尤其是rule和我們之前url的拼接是一致的，比如imageMogr2/blur/8x5、imageMogr2/rradius/100等參數(shù)仍然有效。

上面函數(shù)里的fileContent不是必要的，也就是說我們可以不在小程序端上傳圖片，而是直接修改云存儲里面已有的圖片，并將圖片處理后的照片保存，這種情況代碼可以寫成如下：

  1. async imgprocess(){
  2.   extCi.invoke({
  3.     action: "ImageProcess",
  4.     cloudPath: "tcbdemo.jpg", // 會直接處理這張圖片
  5.     operations: {
  6.       rules: [
  7.         {
  8.           fileid: "/image_process/tcbdemo.png",
  9.           rule: "imageMogr2/format/png", // 處理樣式參數(shù)，與下載時處理圖像在url拼接的參數(shù)一致
  10.         }
  11.       ]
  12.     },
  13.   }).then(res => {
  14.       console.log(res);
  15.   }).catch(err => {
  16.       console.log(err);
  17.   })
  18. }

4、云函數(shù)端持久化圖像處理

在云函數(shù)端的處理和小程序端的處理，使用的方法大體上是一致的，不過云函數(shù)的處理圖片的場景和小程序端處理圖片的場景會有所不同，小程序端主要用于當(dāng)用于上傳圖片時就對圖片進行處理，云函數(shù)則主要用于從第三方下載圖片之后進行處理或者對云存儲里面的圖片進行處理（比如使用定時觸發(fā)器對云存儲里指定文件夾的圖片進行處理）。不建議把圖片傳輸?shù)皆坪瘮?shù)端再來對圖片進行處理。

使用開發(fā)者工具新建一個imgprocess的云函數(shù)，然后在package.json里添加latest最新版的@cloudbase/extension-ci，并右鍵云函數(shù)目錄選擇在終端中打開輸入命令npm install安裝依賴：

  1. "dependencies": {
  2.   "wx-server-sdk": "latest",
  3.   "@cloudbase/extension-ci": "latest"
  4. }

然后再在index.js里輸入以下代碼，代碼的具體含義可以參考小程序端的內(nèi)容講解：

  1. const cloud = require('wx-server-sdk')
  2. cloud.init({
  3.     env: cloud.DYNAMIC_CURRENT_ENV
  4.   })
  5. const extCi = require('@cloudbase/extension-ci')
  6. cloud.registerExtension(extCi)
  9. async function process() {
  10.   try {
  11.     const opts = {
  12.       rules: [
  13.         {
  14.           fileid: '/image_process/tcbdemo.jpeg',
  15.           rule: 'imageMogr2/format/png' 
  16.         }
  17.       ]
  18.     }
  19.     const res = await app.invokeExtension('CloudInfinite', {
  20.       action: 'ImageProcess',
  21.       cloudPath: "tcbdemo.jpg", 
  22.       fileContent, 
  23.       operations: opts
  24.     })
  25.     console.log(res)
  26.     return res
  27.   } catch (err) {
  28.     console.log(err)
  29.   }
  30. }
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號