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

2020-07-22 15:32 更新

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

一、圖像處理

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

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

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

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
  }
}

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

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

二、OCR人工智能識(shí)別

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

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

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

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
    }
}

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

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


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


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


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

三、圖像處理拓展能力

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

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

1、圖像處理能力介紹

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

  • 縮放：等比縮放、設(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)化，漸進(jìn)顯示功能；

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

  • 高斯模糊：對(duì)圖片進(jìn)行模糊處理；

  • 銳化：對(duì)圖片進(jìn)行銳化處理；

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

  • 文字水?。禾峁?shí)時(shí)文字水印處理功能；

  • 獲取圖片基本信息：查詢(xún)圖片基本信息，包括格式、長(zhǎng)、寬等；

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

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

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

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

  • 管道操作符：對(duì)圖片按順序進(jìn)行多種處理

當(dāng)我們?cè)?a rel="external nofollow" target="_blank" >騰訊云云開(kāi)發(fā)網(wǎng)頁(yè)控制臺(tái)(注意要使用微信公眾號(hào)的方式登錄)
添加完圖像處理的拓展能力之后，我們可以在騰訊云的數(shù)據(jù)萬(wàn)象存儲(chǔ)桶里看到云開(kāi)發(fā)的云存儲(chǔ)，
而關(guān)于圖像處理能力的深入使用，也可以參考騰訊云數(shù)據(jù)萬(wàn)象的技術(shù)文檔。

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

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

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

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

2、圖像地址的拼接

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

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

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

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

//將圖片等比例縮小到原來(lái)的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簡(jiǎn)寫(xiě)為download_url:

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


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


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


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


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


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


//忽略原圖寬高比例，指定圖片寬度為 Width，高度為 Height ，強(qiáng)行縮放圖片，可能導(dǎo)致目標(biāo)圖片變形
download_url&imageMogr2/thumbnail/640x355!


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


//取半徑為300，進(jìn)行內(nèi)切圓裁剪
download_url&imageMogr2/iradius/300


//取半徑為100px，進(jìn)行圓角裁剪
download_url&imageMogr2/rradius/100


//順時(shí)針旋轉(zhuǎn)90度
download_url&imageMogr2/rotate/90


//將jpg格式的原圖片轉(zhuǎn)換為 png 格式
download_url&imageMogr2/format/png


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


//獲取圖片的基礎(chǔ)信息，返回的是json格式，我們可以使用https請(qǐng)求來(lái)查看圖片的format格式,width寬度、height高度，size大小，photo_rgb主色調(diào)
download_url&imageInfo

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

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

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

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

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

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

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

在小程序端進(jìn)行圖像處理

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

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

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

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

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

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(); //獲取圖像的臨時(shí)文件上傳結(jié)果
  const fileContent = fileResult.data  //獲取上傳到臨時(shí)文件的圖像，為Uint8Array或Buffer格式
  async function imageProcess() {
    extCi.invoke({
      action: "ImageProcess",
      cloudPath: "tcbdemo.jpg", // 圖像在云存儲(chǔ)中的路徑，有點(diǎn)類(lèi)似于wx.cloud.uploadFile接口里的cloudPath，上傳的文件會(huì)保存為云存儲(chǔ)根目錄下的hehe.jpg
      operations: {
        rules: [
          {
            fileid: "/image_process/tcbdemo.png", //將圖片存儲(chǔ)到云存儲(chǔ)目錄下的image_process文件夾里，也就是我們用image_process存儲(chǔ)處理之后的圖片
            rule: "imageMogr2/format/png", // 處理樣式參數(shù)，我們可以在這里寫(xiě)圖片處理的參數(shù)拼接
          }
        ]
      },
      fileContent
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
  }
  await imageProcess()
}
  • 可能你的開(kāi)發(fā)者工具會(huì)報(bào)以下錯(cuò)誤：https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中，請(qǐng)參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html，這個(gè)要按照參考文檔將鏈接加入到合法域名當(dāng)中，不然不會(huì)生成圖片；

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

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

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

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

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

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

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

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

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

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)
  }
}
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)