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

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

一、圖像處理

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

{
  "permissions": {
    "openapi": [
      "img.scanQRCode"
    ]
  }
}

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

const cloud = require('wx-server-sdk')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
  })
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.img.scanQRCode({
      imgUrl:"https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/qrcodetest.png" //注意二維碼必須是條碼/二維碼，不能是小程序碼
  })
    return result


  } catch (err) {
    console.log(err)
    return err
  }
} 

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

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

二、OCR人工智能識別

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

{
  "permissions": {
    "openapi": [
      "ocr.printedText"
    ]
  }
}

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

const cloud = require('wx-server-sdk')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
  })
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.ocr.printedText({
        imgUrl: 'https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/ocrprint.png'
  })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
    }
}

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

items: Array(4)
0: {text: "JavaScript入門", pos: {…}}


1: {text: "JavaScript是目前世界上最流行的編程語言之一，它也是小程序開發(fā)最重要的基礎語言。要做出一個功能復雜的小程序，除了需要掌握JavaScript的基本語", pos: {…}}


2: {text: "法，還要了解如何使用JavaScript來操作小程序(通過API接口)", pos: {…}}


3: {text: "過API接口)。", pos: {…}}

三、圖像處理拓展能力

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

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

1、圖像處理能力介紹

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

• 縮放：等比縮放、設定目標寬高縮放等多種方式；

• 裁剪：普通裁剪、縮放裁剪、內切圓、人臉智能裁剪；

• 旋轉：普通旋轉、自適應旋轉；

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

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

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

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

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

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

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

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

• 獲取圖片主色調：獲取圖片主色調信息；

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

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

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

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

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

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

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

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

2、圖像地址的拼接

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

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

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

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

//將圖片等比例縮小到原來的20%
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:

//縮放寬度，高度不變，下面案例為寬度為原圖50%，高度不變
download_url&imageMogr2/thumbnail/!50px


//縮放高度，寬度不變，下面案例為高度為原圖50%，寬度不變
download_url&imageMogr2/thumbnail/!x50p


//指定目標圖片的寬度（單位為px），高度等比壓縮，注意下面的是x，不是px，p與x在拼接里代表著不同的意思
download_url&imageMogr2/thumbnail/640x


//指定目標圖片的高度（單位為px），寬度等比壓縮：
download_url&imageMogr2/thumbnail/x355


//限定縮略圖的寬度和高度的最大值分別為 Width 和 Height，進行等比縮放
download_url&imageMogr2/thumbnail/640x355


//限定縮略圖的寬度和高度的最小值分別為 Width 和 Height，進行等比縮放
download_url&imageMogr2/thumbnail/640x355r


//忽略原圖寬高比例，指定圖片寬度為 Width，高度為 Height ，強行縮放圖片，可能導致目標圖片變形
download_url&imageMogr2/thumbnail/640x355!


//等比縮放圖片，縮放后的圖像，總像素數(shù)量不超過 Area
download_url&imageMogr2/thumbnail/150000@


//取半徑為300，進行內切圓裁剪
download_url&imageMogr2/iradius/300


//取半徑為100px，進行圓角裁剪
download_url&imageMogr2/rradius/100


//順時針旋轉90度
download_url&imageMogr2/rotate/90


//將jpg格式的原圖片轉換為 png 格式
download_url&imageMogr2/format/png


//模糊半徑取8，sigma 值取5，進行高斯模糊處理
download_url&imageMogr2/blur/8x5


//獲取圖片的基礎信息，返回的是json格式，我們可以使用https請求來查看圖片的format格式,width寬度、height高度，size大小，photo_rgb主色調
download_url&imageInfo

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

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

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

在小程序端構建圖像拓展依賴

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

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

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

在小程序端進行圖像處理

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

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

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

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

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

async imgprocess(){
  const readFile = async function() {
    let res = await new Promise(resolve=>{
        wx.chooseImage({
            success: function(res) {
                let filePath = res.tempFilePaths[0]
                let fm = wx.getFileSystemManager()
                fm.readFile({
                    filePath,
                    success(res){
                        resolve(res)
                    }
                })
            }
        })
    })
    return res
  }
  let fileResult = await readFile(); //獲取圖像的臨時文件上傳結果
  const fileContent = fileResult.data  //獲取上傳到臨時文件的圖像，為Uint8Array或Buffer格式
  async function imageProcess() {
    extCi.invoke({
      action: "ImageProcess",
      cloudPath: "tcbdemo.jpg", // 圖像在云存儲中的路徑，有點類似于wx.cloud.uploadFile接口里的cloudPath，上傳的文件會保存為云存儲根目錄下的hehe.jpg
      operations: {
        rules: [
          {
            fileid: "/image_process/tcbdemo.png", //將圖片存儲到云存儲目錄下的image_process文件夾里，也就是我們用image_process存儲處理之后的圖片
            rule: "imageMogr2/format/png", // 處理樣式參數(shù)，我們可以在這里寫圖片處理的參數(shù)拼接
          }
        ]
      },
      fileContent
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
  }
  await imageProcess()
}

• 可能你的開發(fā)者工具會報以下錯誤：https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中，請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html，這個要按照參考文檔將鏈接加入到合法域名當中，不然不會生成圖片；

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

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

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

async imgprocess(){
  extCi.invoke({
    action: "ImageProcess",
    cloudPath: "tcbdemo.jpg", // 會直接處理這張圖片
    operations: {
      rules: [
        {
          fileid: "/image_process/tcbdemo.png",
          rule: "imageMogr2/format/png", // 處理樣式參數(shù)，與下載時處理圖像在url拼接的參數(shù)一致
        }
      ]
    },
  }).then(res => {
      console.log(res);
  }).catch(err => {
      console.log(err);
  })
}

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

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

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

"dependencies": {
  "wx-server-sdk": "latest",
  "@cloudbase/extension-ci": "latest"
}

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

const cloud = require('wx-server-sdk')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
  })
const extCi = require('@cloudbase/extension-ci')
cloud.registerExtension(extCi)


async function process() {
  try {
    const opts = {
      rules: [
        {
          fileid: '/image_process/tcbdemo.jpeg',
          rule: 'imageMogr2/format/png' 
        }
      ]
    }
    const res = await app.invokeExtension('CloudInfinite', {
      action: 'ImageProcess',
      cloudPath: "tcbdemo.jpg", 
      fileContent, 
      operations: opts
    })
    console.log(res)
    return res
  } catch (err) {
    console.log(err)
  }
}