myScript調研，電子手寫板使用，純干貨

第二天進公司，就叫我調研myScript作為手寫板的可行性，又不能不做，哎~
myScript效果十分的奈斯，前端用canvas手寫的文字、數學字符，都可以識別然后轉換，不知道myScript是不是你想要的，可以先去看下他們的官網介紹
https://developer.myscript.com/math
最后說一點這個東西現在可是收費的，現在注冊之后每月2000個免費請求

先介紹一下該庫的架構

手寫識別並不是你代碼里的myScript就能完成的，大致來說myScript先在前端把你選擇的div內部創建canvas，然后你每用鼠標滑動一筆，myScript就會記錄你滑動的操作，起點坐標，終點坐標什么的
，然后發送到他們的外網服務器，服務器解析后再返回匹配的文字數字什么的給你，具體請看官網。

使用第一步注冊，獲取2個key，applicationKey、hmacKey放到你的項目里才能夠使用

注冊地址 https://developer.myscript.com/support/account/registering-myscript-cloud/
注冊很簡單，在你郵箱發幾封郵件的事情，然后你就獲得了每月2000個免費請求的使用權，具體怎么算的我看官網也不是很懂，只能說我使用了2天，總共花了200個請求，如果真的要在線上環境使用
，肯定是要花錢的
價格以及請求計算的介紹 https://developer.myscript.com/pricing

啥都不說了，直接跑起來再說吧

demo：https://github.com/qiaokeli111/myScript-Example
運行examples目錄下的index.html就可以看到各種效果，大家自己跑起來玩玩吧（可以的話點個star啊，辛苦了那么久）

配置

這個是最關鍵的，
官網文檔 https://developer.myscript.com/docs/interactive-ink/1.3/web/reference/configuration-myscriptjs/
先簡單舉個text文字類的例子講講

    MyScript.register(editorElement, {
      
      recognitionParams: {
        type: 'TEXT', 
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: "a8787c4f-2cb9-4801-8eaf-badb11eaf075", // MyScript Cloud application key - change the keys for production use
          hmacKey: "51ca41c0-8f0b-4461-90a9-813d40169eaa", // MyScript Cloud HMAC key - change the keys for production use
        },
        v4: {
          lang: 'zh_CN',
        }
      }
    });

editorElement 選中的html元素沒什么好說的
type 手寫板類型文檔有詳細介紹
server里的基本都不會變得
lang 這個值得講下，這個是v4版本配置語言的方法跟v3不一樣，但是這段時間自己測試感覺v4中文支持遠不如v3的好用
常用配置就是這些，其他特殊需要，就要自己去讀官方配置文檔了
v3配置：

     MyScript.register(editorElement, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        apiVersion: 'V3',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: "a8787c4f-2cb9-4801-8eaf-badb11eaf075", // MyScript Cloud application key - change the keys for production use
          hmacKey: "51ca41c0-8f0b-4461-90a9-813d40169eaa", // MyScript Cloud HMAC key - change the keys for production use
        },
        v3: {
          textParameter: {
            language: 'zh_CN', // Set the recognition language (i.e.: 'en_US', 'fr_FR', ...)
            resultDetail: 'CHARACTER',
            textProperties: {
              textCandidateListSize: 10
            }
          }
        }
      }
    });

textCandidateListSize 這個參數值得注意下，是模糊匹配的結果數

再介紹下鈎子和方法
官網：https://developer.myscript.com/docs/interactive-ink/1.3/web/myscriptjs/editing/
editorElement.editor.undo(); 往前
editorElement.editor.redo(); 往后
editorElement.editor.clear(); 清除
如果之后需要修改初始化時的配置，直接修改指定元素的editor對象
如點擊下拉框選擇文字語言

    languageElement.addEventListener('change', function (e) {
      var configuration = editorElement.editor.configuration;
      configuration.recognitionParams.v3.textParameter.language = e.target.value; // e.target.value是文字語言的格式，如'zh_CN'
      editorElement.editor.configuration = configuration;
    });

pointerDown() pointerMove() pointerUp() 是鼠標或手指按下，移動，抬起的方法，沒有用過，不是很清楚，只是知道有，需要的自己去研究吧

loaded 加載好之后的鈎子
converted 轉換好之后的鈎子
exported 后台返回時的鈎子，這個是很有用的，大家可以打印下看看里面有什么，當然我的example代碼里每個例子都有，大家要看看，基本上你需要的功能都要用到這個
resize 當屏幕變化，myScript不會主動識別，需要你執行resize方法。一般這么用

    window.addEventListener('resize', function () {
      editorElement.editor.resize();
    });

導入和導出的方法：
import_ 方法導入，2個參數，第一個值，第二個類型
手寫板類型支持的導入導出類型請看官網文檔：https://developer.myscript.com/docs/interactive-ink/1.3/overview/import-and-export-formats/ （jiix是myScript自己定義的數據格式，數字的導入只支持這個）
然而官網並沒有寫清楚具體類型的格式，對應的格式文檔：https://blog.csdn.net/zhezhebie/article/details/80513499
使用如下 editorElement.editor.import_(value, 'text/plain'); // value 隨便填個字符串
export_ 方法導出，沒有參數直接用
使用如下 editorElement.editor.export_();
那如何設置導出的類型呢，我找了好久終於在文檔里找到了（英文文檔對於我這種人簡直是種折磨！）

導出類型是寫在配置里面，

    recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: "a8787c4f-2cb9-4801-8eaf-badb11eaf075", // MyScript Cloud application key - change the keys for production use
          hmacKey: "51ca41c0-8f0b-4461-90a9-813d40169eaa", // MyScript Cloud HMAC key - change the keys for production use
        },
        v4: {
          lang: 'zh_CN',
          text: {
            mimeTypes: ['text/plain', 'application/vnd.myscript.jiix', 'image/jpeg']
          }
        }
      }

我在默認的2種類型里面多加了一個'image/jpeg'類型，再exported鈎子里就可以看到base64格式的圖片了

總結

我只是研究了2天，因為myScript網上的講解例子不多，所以一開始很困惑，外文官網看的我也很崩潰，現在基本能使用了，就打算寫篇博客看能不能幫助到別人，可以說它除了要花錢，其他什么都好，哎