手寫辨識 API 可讓您辨識手寫輸入內容中的文字，
什麼是手寫辨識 API？
手寫辨識 API 可讓您將使用者的手寫 (手寫) 轉換成文字。 某些作業系統一直以來都提供這類 API。有了這項新功能，您的網頁應用程式即可 最後會使用這項功能轉換會直接在使用者的裝置上進行，即使 離線模式，完全不需要新增任何第三方程式庫或服務。
此 API 實作所謂的「線上」或近乎即時辨識也就是說， 透過擷取並分析單則手寫輸入操作，以辨識使用者手寫輸入 筆劃。相較於「離線」程序，如光學字元辨識 (OCR)，其中 因此即時演算法只能提供最終成品，因此準確度更高 額外信號，例如時序和個別墨水筆觸的壓力。
手寫辨識 API 建議用途
用途範例包括：
- 記事應用程式，可讓使用者擷取手寫筆記並翻譯 轉換為文字
- 表單應用程式，可讓使用者基於時間限制使用畫筆或手指輸入功能。
- 需要填入英文字母或數字的遊戲，例如填字、懸吊或數通數。
目前狀態
手寫辨識 API 適用於 (Chromium 99)。
如何使用手寫辨識 API
特徵偵測
檢查 createHandwritingRecognizer() 方法是否存在，藉此偵測瀏覽器支援
呼叫導覽器物件上
if ('createHandwritingRecognizer' in navigator) {
// 🎉 The Handwriting Recognition API is supported!
}
核心概念
無論輸入法為何，手寫辨識 API 都會將手寫輸入轉換成文字 (滑鼠、觸控、筆)。API 包含四個主要實體：
- 點代表指標在特定時間的位置。
- 「筆劃」由一或多個點組成。系統會在使用者做出手指動作時開始記錄筆劃 指標向下 (即按一下滑鼠主要按鈕，或是使用觸控筆或 手指)，等到滑鼠遊標升起時結束。
- 「繪圖」包含一或多個筆劃。實際辨識是在這個層級進行。
- recognizer 會以預期的輸入語言設定。可用來建立執行個體 套用辨識工具設定的繪圖
這些概念是以特定介面和字典形式實作，我們稍後會探討。
建立辨識工具
如要辨識手寫輸入的文字，您必須取得
呼叫 navigator.createHandwritingRecognizer() 並傳遞限制條件，即可HandwritingRecognizer
先前提過
執行個體對於分配到的外部 IP 位址一無所知限制條件會決定應使用的手寫辨識模型。目前，你
可以依照偏好順序指定語言清單：
const recognizer = await navigator.createHandwritingRecognizer({
languages: ['en'],
});
這個方法會傳回可解析為 HandwritingRecognizer 例項的承諾，且當
瀏覽器就能執行您的要求否則會拒絕含有錯誤的承諾。
系統將不提供手寫辨識功能。因此，建議您查詢
特定辨識功能的支援
查詢辨識工具支援
呼叫 navigator.queryHandwritingRecognizerSupport() 即可檢查目標平台
可支援您想使用的手寫辨識功能。在以下範例中，
開發人員：
- 想要偵測英文文字
- 取得替代字詞，較不可能的預測 (如有)
- 可以使用區隔結果，也就是可辨識的字元，包括點和 排列元素
const { languages, alternatives, segmentationResults } =
await navigator.queryHandwritingRecognizerSupport({
languages: ['en'],
alternatives: true,
segmentationResult: true,
});
console.log(languages); // true or false
console.log(alternatives); // true or false
console.log(segmentationResult); // true or false
這個方法會傳回使用結果物件解析的承諾。如果瀏覽器支援這項功能
開發人員指定的值將設為 true。否則該欄位會設為 false。
您可以使用這項資訊在應用程式內啟用或停用特定功能，或是
請調整查詢並傳送新的查詢。
開始繪圖
在應用程式中，您應該提供使用者手寫輸入的輸入區域 項目。基於成效考量，建議您在導入這個廣告時， canvas 物件的子類別。與 這個部分的導入作業不在本文的討論範圍，但您還是可以參考示範 瞭解具體做法
如要開始新的繪圖，請在辨識器上呼叫 startDrawing() 方法。這個方法需要
物件，其中包含用來微調辨識演算法的提示。所有提示皆為選填：
- 輸入的文字類型：文字、電子郵件地址、數字或個別字元
(
recognitionType)。 - 輸入裝置類型：滑鼠、觸控或觸控筆輸入 (
inputType) - 上方文字 (
textContext) - 應傳回不太可能傳回的替代預測結果數量 (
alternatives) - 使用者最有可能輸入的可識別字元 (「圖形」) 清單
(
graphemeSet)。
手寫辨識 API 可與以下工具相輔相成：
指標事件，可提供
抽象介面取用任何指標裝置的輸入內容。指標事件引數包含
所用指標的類型這表示您可以利用指標事件來判斷輸入類型
。下列範例會自動繪製手寫辨識的繪圖
第一次在手寫區域發生 pointerdown 事件時建立。身為
pointerType 可以是空白或設為專屬值，我導入了一致性檢查，
確保只針對繪圖的輸入類型設定支援的值。
let drawing;
let activeStroke;
canvas.addEventListener('pointerdown', (event) => {
if (!drawing) {
drawing = recognizer.startDrawing({
recognitionType: 'text', // email, number, per-character
inputType: ['mouse', 'touch', 'pen'].find((type) => type === event.pointerType),
textContext: 'Hello, ',
alternatives: 2,
graphemeSet: ['f', 'i', 'z', 'b', 'u'], // for a fizz buzz entry form
});
}
startStroke(event);
});
新增筆劃
pointerdown 事件也是開始新的筆觸的正確位置。如要這麼做，請建立一個
HandwritingStroke 的執行個體。此外，您也應該儲存目前時間，做為
加入的後續點數：
function startStroke(event) {
activeStroke = {
stroke: new HandwritingStroke(),
startTime: Date.now(),
};
addPoint(event);
}
新增地點
建立筆觸後，應直接新增第一個點。您將會增加
稍後，在單獨的方法中實作點的邏輯會很合理。在
舉例來說，addPoint() 方法會從參考時間戳記計算經過的時間。
時間資訊不一定要提供，但可以改善辨識品質。接著，它會讀取 X 和
指標事件產生的 Y 座標，並將該點新增至目前的筆觸。
function addPoint(event) {
const timeElapsed = Date.now() - activeStroke.startTime;
activeStroke.stroke.addPoint({
x: event.offsetX,
y: event.offsetY,
t: timeElapsed,
});
}
指標在畫面上移動時，系統會呼叫 pointermove 事件處理常式。這些要點
必須一併加入筆觸如果指標不在
「向下」狀態，例如：在不按下滑鼠的情況下將遊標移到螢幕上
按鈕。下列範例的事件處理常式會檢查是否有作用中的筆劃，然後新增
指向這個星球的新地點
canvas.addEventListener('pointermove', (event) => {
if (activeStroke) {
addPoint(event);
}
});
辨識文字
當使用者再次舉起指標時，您就可以呼叫筆觸，將筆觸加入繪圖中
addStroke() 方法。以下範例也會重設 activeStroke，因此 pointermove
處理常式不會新增點到完成的筆觸。
接著，請在呼叫 getPrediction() 方法上，
繪圖。辨識通常只需幾百毫秒，因此您可以重複執行
並視需求做出預測下列範例會在您每次完成筆劃後執行新的預測。
canvas.addEventListener('pointerup', async (event) => {
drawing.addStroke(activeStroke.stroke);
activeStroke = null;
const [mostLikelyPrediction, ...lessLikelyAlternatives] = await drawing.getPrediction();
if (mostLikelyPrediction) {
console.log(mostLikelyPrediction.text);
}
lessLikelyAlternatives?.forEach((alternative) => console.log(alternative.text));
});
這個方法會傳回一個承諾，其會依照
可能性。元素數量取決於您傳遞至 alternatives 提示的值。個人中心
可以使用這個陣列，向使用者顯示任何可能相符的項目，並讓他們自行選取
如果有需要 SQL 指令的分析工作負載
則 BigQuery 可能是最佳選擇或者，您也可以直接取得最可能的預測結果，也就是
範例。
預測物件包含系統辨識的文字和選用的區隔結果，我會將結果 我們會在下一節進行討論。
透過區隔結果取得詳盡的深入分析
如果目標平台支援，則預測物件也可以包含區隔結果。
這個陣列包含所有已辨識的手寫片段，以及可辨識的組合
可識別的字元 (grapheme) 及其在辨識的文字中的位置
(beginIndex、endIndex) 以及建立該元素的筆劃和點。
if (mostLikelyPrediction.segmentationResult) {
mostLikelyPrediction.segmentationResult.forEach(
({ grapheme, beginIndex, endIndex, drawingSegments }) => {
console.log(grapheme, beginIndex, endIndex);
drawingSegments.forEach(({ strokeIndex, beginPointIndex, endPointIndex }) => {
console.log(strokeIndex, beginPointIndex, endPointIndex);
});
},
);
}
您可以使用這項資訊，再次追蹤畫布上辨識出的圖形。
完成辨識
辨識完成後，您可以呼叫 clear() 方法的
HandwritingDrawing 以及 HandwritingRecognizer 上的 finish() 方法：
drawing.clear();
recognizer.finish();
示範
網頁元件 <handwriting-textarea> 會導入
漸進式改善，編輯控制選項，支援手寫功能
辨識。按一下編輯控制項右下角的按鈕，即可啟用
繪圖模式完成繪圖後，網頁元件會自動啟動
並將辨識的文字加回編輯控制項如果手寫辨識
完全不支援 API，或是平台不支援要求的功能，也就是編輯按鈕
設為隱藏但基本編輯控制項仍可做為 <textarea> 使用。
網頁元件提供各種屬性和屬性，以定義裝置中的辨識行為
外部，包括 languages 和 recognitiontype。您可以透過
value 屬性：
<handwriting-textarea languages="en" recognitiontype="text" value="Hello"></handwriting-textarea>
如要接收值的任何變更通知，您可以監聽 input 事件。
您可以使用這個 Glitch 示範來試用元件。 另外，請務必詳閱 原始碼。如要在 從 npm 取得。
安全性和權限
Chromium 團隊根據核心原則設計及實作手寫辨識 API 定義，包括控管強大的 Web Platform 功能存取權，包括使用者 掌控權、透明度和人體工學
使用者控制項
使用者無法關閉手寫辨識 API。這項功能僅適用於網站 並且只能從頂層瀏覽環境呼叫，
透明度
沒有跡象顯示手寫辨識功能是否已啟用。為了防止數位指紋採集，瀏覽器 導入對應措施，例如在偵測到使用者時顯示權限提示 可能遭到濫用
權限持續性
手寫辨識 API 目前不會顯示任何權限提示。因此，權限 不需要以任何方式保存
意見回饋
Chromium 團隊想瞭解你的手寫辨識 API 使用體驗。
請與我們分享 API 設計
您覺得這個 API 有什麼不如預期的運作方式？或者缺少某些方法 需要實現什麼構想？對安全性有任何疑問或意見 以及模型在對應的 GitHub 存放區上提出規格問題，或將您的想法新增至 現有的問題。
回報導入問題
您發現 Chromium 實作錯誤嗎？還是採用與規格不同？
前往 new.crbug.com 回報錯誤。請務必盡量提供詳細資料
重現問題的簡單操作說明，然後在「Components」(元件) 方塊中輸入 Blink>Handwriting。
Glitch 有便捷的報復工具，
顯示對 API 的支援
你打算使用手寫辨識 API 嗎？你的公開支援能協助 Chromium 團隊 優先開發功能，並向其他瀏覽器廠商說明支援這些功能的重要性。
歡迎前往 WICG Discourse 討論串，說明這項工具的運用方式。將推文傳送給
使用主題標記 @ChromiumDev
#HandwritingRecognition敬上
，並說明你使用這項服務的位置和方式。
實用連結
特別銘謝
本文評論者為 Joe Medley、Honglin Yu 和 Jiewei Qian。主頁橫幅製作者： Samir Bouaked 已啟用 Unsplash。