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

jerryOnlyZRJ發表於2019-02-13
API

注意：我們目前正在使用此 API 的規範作為功能專案的一部分，隨著這個新的 API 從設計轉向實現，我們將保持這篇文章的不斷更新。

什麼是形狀檢測 API？

藉助 API navigator.mediaDevices.getUserMedia 和新版安卓的 chrome photo picker，從移動裝置上的相機獲取影象或者實時上傳視訊資料或本地影象變得相當容易。在此之前，這些動態的影象資料以及頁面上的靜態影象一直都是個我們無法操作的黑盒，即使影象實際上可能包含許多有趣的特徵，如人臉、條形碼和文字。

過去，如果開發人員想要在客戶端提取這些特徵，例如構建一個二維碼識別器，他們必須藉助外部的 JavaScript 庫。從效能的角度來看代價是昂貴的，並且會增加整體頁面的資源體積。另一方面，諸如 Android、iOS 和 macOS 這些作業系統，以及他們的相機模組中的硬體晶片，通常已經具有高效能和高度優化的特徵檢測器，例如 Android 的 FaceDetector 或者 iOS 自帶的特徵檢測器 CIDetector。

而 Shape Detection API 做的便是呼叫這些原生實現，並將其轉化為一組 JavaScript 介面。目前，這個 API 支援的功能是通過 FaceDetector 介面進行人臉檢測，通過 BarcodeDetector 介面進行條形碼檢測以及通過 TextDetector 介面進行文字檢測（光學字元識別，OCR）。

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

閱讀更多相關解釋

Shape Detection API 實踐用例

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

  • 人臉檢測

    • 線上社交網路或照片共享網站通常會讓使用者在影象中標記出人物。通過邊緣檢測識別人臉，能使這項工作更為便捷。
    • 內容網站可以根據可能檢測到的面部動態裁剪影象，而不是依賴於其他啟發式方法，或者使用 Ken Burns 提出的通過平移或者縮放檢測人臉。
    • 多媒體訊息網站可以允許其使用者在檢測到的面部的不同位置上新增太陽鏡或鬍鬚之類的有趣貼圖。

  • 條形碼檢測

    • 能夠讀取二維碼的 Web 應用程式可以實現很多有趣的用例，如線上支付或 Web 導航，或使用條形碼在應用程式上分享社交連線。
    • 購物應用可以允許其使用者掃描實體店中物品的 EAN 或者 UPC 條形碼，以線上比較價格。
    • 機場可以設立網路資訊亭，乘客可以在那裡掃描登機牌的 Aztec codes 以顯示與其航班相關的個性化資訊。

  • 文字檢測

    • 當沒有提供其他描述時，線上社交網站可以通過將檢測到的文字新增為 img[alt] 屬性值來改善使用者生成的影象內容的體驗。
    • 內容網站可以使用文字檢測來避免將標題置於包含文字的主要影象之上。
    • Web 應用程式可以使用文字檢測來翻譯文字，例如，翻譯餐館選單。

當前進度

步驟 狀態
1、建立直譯器 完成
2、建立規範的初始草案 進行中
3、收集反饋並迭代 進行中
4、投入實驗 進行中
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))();
複製程式碼

最佳做法

所有檢測器都是非同步工作的，也就是說，它們不會阻塞主執行緒 ? ，因此不要過分追求實時檢測，而是給檢測器一段時間來完成其工作。

如果你是 Web Workers 的忠實粉絲（難道還有人不是嗎？）最棒的是檢測器的介面也暴露在那裡。檢測結果也是可序列化的，因此可以通過 postMessage 將其從 worker 執行緒傳回主執行緒。這裡有個 demo 展示了一些簡單實踐。

並非所有平臺實現都支援所有功能，因此請務必仔細檢查支援情況，並將 API 看作是漸進增強功能。例如，某些平臺本身可能支援人臉檢測，但不支援面部標誌檢測（眼睛、鼻子、嘴巴等等），或者可以識別文字的存在和位置，但不識別實際的文字內容。

小提示：此 API 是一種優化，並不能保證每個使用者都可以正常使用。期望開發人員將其與他們自己的影象識別程式碼相結合，當其可用時將其作為原生的一種優化手段。

意見反饋

我們需要您的幫助，以確保 Shape Detection API 能夠滿足您的需求，並且我們不會錯過任何關鍵方案。

我們需要你的幫助！ —— Shape Detection API 的當前設計是否滿足您的需求？如果不能，請在 Shape Detection API repo 提交 issue 並提供儘可能詳細的資訊。

我們也很想知道您打算如何使用 Shape Detection API：

  • 有一個獨到的使用場景或者說你知道在哪些情況下可以用到它？
  • 你打算用這個嗎？
  • 喜歡它，並想表達你對它的支援？

在 Shape Detection API WICG Discourse 上分享您的討論與看法。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章