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网上的讲解例子不多，所以一开始很困惑，外文官网看的我也很崩溃，现在基本能使用了，就打算写篇博客看能不能帮助到别人，可以说它除了要花钱，其他什么都好，哎