[譯] 提取圖片中的文字、人臉或者條形碼 —— 形狀檢測API

時間 2019-11-07

標籤提取圖片文字或者條形碼形狀檢測 api 简体版

原文原文鏈接

原文地址：A Picture is Worth a Thousand Words, Faces, and Barcodes—The Shape Detection API

原文做者：Thomas Steiner

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：jerryOnlyZRJ

校對者：Park-ma, haiyang-tju

注意：咱們目前正在使用此 API 的規範做爲功能項目的一部分，隨着這個新的 API 從設計轉向實現，咱們將保持這篇文章的不斷更新。html

什麼是形狀檢測 API？

藉助 API navigator.mediaDevices.getUserMedia 和新版安卓的 chrome photo picker，從移動設備上的相機獲取圖像或者實時上傳視頻數據或本地圖像變得至關容易。在此以前，這些動態的圖像數據以及頁面上的靜態圖像一直都是個咱們沒法操做的黑盒，即便圖像實際上可能包含許多有趣的特徵，如人臉、條形碼和文本。前端

過去，若是開發人員想要在客戶端提取這些特徵，例如構建一個二維碼識別器，他們必須藉助外部的 JavaScript 庫。從性能的角度來看代價是昂貴的，而且會增長總體頁面的資源體積。另外一方面，諸如 Android、iOS 和 macOS 這些操做系統，以及他們的相機模塊中的硬件芯片，一般已經具備高性能和高度優化的特徵檢測器，例如 Android 的 FaceDetector 或者 iOS 自帶的特徵檢測器 CIDetector。android

而 Shape Detection API 作的即是調用這些原生實現，並將其轉化爲一組 JavaScript 接口。目前，這個 API 支持的功能是經過 FaceDetector 接口進行人臉檢測，經過 BarcodeDetector 接口進行條形碼檢測以及經過 TextDetector 接口進行文本檢測（光學字符識別，OCR）。ios

小提示：儘管文本檢測是一個有趣的領域，但在目前要標準化的計算平臺或字符集中，文本檢測還不夠穩定，這也使文本檢測已經有一套單獨的信息規範的緣由。git

閱讀更多相關解釋github

Shape Detection API 實踐用例

如上所述，Shape Detection API 目前支持檢測人臉、條形碼和文本。如下列表包含了全部三個功能的用例示例：web

人臉檢測chrome
- 在線社交網絡或照片共享網站一般會讓用戶在圖像中標記出人物。經過邊緣檢測識別人臉，能使這項工做更爲便捷。
- 內容網站能夠根據可能檢測到的面部動態裁剪圖像，而不是依賴於其餘啓發式方法，或者使用 Ken Burns 提出的經過平移或者縮放檢測人臉。
- 多媒體消息網站能夠容許其用戶在檢測到的面部的不一樣位置上添加太陽鏡或鬍鬚之類的有趣貼圖。
條形碼檢測canvas
- 可以讀取二維碼的 Web 應用程序能夠實現不少有趣的用例，如在線支付或 Web 導航，或使用條形碼在應用程序上分享社交鏈接。
- 購物應用能夠容許其用戶掃描實體店中物品的 EAN 或者 UPC 條形碼，以在線比較價格。
- 機場能夠設立網絡信息亭，乘客能夠在那裏掃描登機牌的 Aztec codes 以顯示與其航班相關的個性化信息。
文字檢測後端
- 當沒有提供其餘描述時，在線社交網站能夠經過將檢測到的文本添加爲 img[alt] 屬性值來改善用戶生成的圖像內容的體驗。
- 內容網站可使用文本檢測來避免將標題置於包含文本的主要圖像之上。
- Web 應用程序可使用文本檢測來翻譯文本，例如，翻譯餐館菜單。

當前進度

步驟	狀態
一、建立解釋器	完成
二、建立規範的初始草案	進行中
三、收集反饋並迭代	進行中
四、投入實驗	進行中
5. 發佈	未開始

如何使用 Shape Detection API

三個檢測器向外暴露的接口 FaceDetector、BarcodeDetector 和 TextDetector 都很是類似，它們都提供了一個異步方法 detect，它接受一個 ImageBitmapSource 輸入（或者是一個 CanvasImageSource、[Blob] 對象(w3c.github.io/FileAPI/#df…) 或者 ImageData）。

在使用 FaceDetector 和 BarcodeDetector 的狀況下，可選參數能夠被傳遞到所述檢測器的構造函數中，其容許向底層原生檢測器發起調用指示。

小提示：若是你的 ImageBitmapSource 來自一個獨立的腳本源而且與 document 的源不一樣，那麼 detect 將會調用失敗並拋出一個名爲 SecurityError 的 DOMException 。若是你的圖片對跨域設置了 CORS，那麼你可使用 crossorigin 屬性來請求 CORS 訪問。

在項目裏使用 `FaceDetector`

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => console.log(face));
} catch (e) {
  console.error('Face detection failed:', e);
}
複製代碼

在項目裏使用 `BarcodeDetector`

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => console.log(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}
複製代碼

在項目裏使用 `TextDetector`

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => console.log(text));
} catch (e) {
  console.error('Text detection failed:', e);
}
複製代碼

可用性檢驗

在使用 Shape Detection API 接口以前檢查構造函數是否存在是必須的，由於雖然 Linux 和 Chrome OS 上的 Chrome 目前已經開放了檢測器的接口，但它們卻無法正常使用（bug）。做爲臨時措施，咱們建議在使用這些 API 以前應當這麼作：

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();
複製代碼