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

myScript调研,电子手写板使用,纯干货的更多相关文章

  1. 360手机助手内部资料曝光,63张PPT纯干货

    360手机助手内部资料曝光,63张PPT纯干货 日前,国内最大的安卓应用商店360手机助手发布了<2016年手机软件行业趋势绿皮书>,这份绿皮书对2015年以来移动互联网的趋势做了总结,展 ...

  2. 【转】纯干货:PS高手完全自学宝典(原创文章)

    文章版权:Tommy子言  原创 一. 一切从基础开始 强大的PS虽然功能众多,但归纳起来主要有三大功能: 修图——主要包括纯图片的修饰.合成.3D合成等等: 画图——主要是指用PS来绘画.广告插画, ...

  3. IT技术学习指导之Linux系统入门的4个阶段(纯干货带图)

    IT技术学习指导之Linux系统入门的4个阶段(纯干货带图) 全世界60%的人都在使用Linux.几乎没有人没有受到Linux系统的"恩惠",我们享受的大量服务(包括网页服务.聊天 ...

  4. Java程序员的日常——经验贴(纯干货)

    工作当中遇到的事情比较杂,因此涉及的知识点也很多.这里暂且记录一下,今天遇到的知识点,纯干货~ 关于文件的解压和压缩 如果你的系统不支持tar -z命令 如果是古老的Unix系统,可能并不认识tar ...

  5. HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像.超链接相关标签,实现图文并茂的页面 (4):会 ...

  6. mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)

    最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...

  7. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  8. 纯干货:深度学习实现之空间变换网络-part2

    https://www.jianshu.com/p/854d111670b6 纯干货:深度学习实现之空间变换网络-part1 在第一部分中,我们主要介绍了两个非常重要的概念:仿射变换和双线性插值,并了 ...

  9. 纯干货:Linux抓包命令集锦

    /******************************************************************************************* 版权声明* 本 ...

  10. 【转】mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)

    mongoDB 学习笔记纯干货(mongoose.增删改查.聚合.索引.连接.备份与恢复.监控等等) http://www.cnblogs.com/bxm0927/p/7159556.html

随机推荐

  1. ls仅列出当前目录下的所有目录

    ls -d */ -d仅列出目录本身,而不列出其中的内容 *通配符,所有的字符 /目录的标识

  2. 高版本(8以上)tomcat不支持rest中的delete和put方式请求怎么办

    出现问题 当我们去访问delete方式和put方式: 后来才知道tomcat8以上是不支持delete方式和put方式 解决方法: 在跳转目标的jsp头文件上改为(加上了isErrorPage=&qu ...

  3. 安装geatpy库到指定的conda虚拟环境中

    在Anaconda Prompt中输入conda install geatpy,提示找不到这个库: 输入pip install geatpy,安装成功:但是安装在默认conda环境下(以下为pycha ...

  4. Java程序员必学知识点

    JVM无论什么级别的Java从业者,JVM都是进阶时必须迈过的坎.不管是工作还是面试中,JVM都是必考题.如果不懂JVM的话,薪酬会非常吃亏(近70%的面试者挂在JVM上了) 详细介绍了JVM有关于线 ...

  5. JavaScript之DOM、DOM树

    一 DOM JavaScript操作网页的接口,全称为"文档对象模型"(Document Object Model). 有这几个概念:文档.元素.节点 整个文档是一个文档节点 每个 ...

  6. Android开发在Activity外申请权限调用相机打开相册

    问题描述: 最近在项目中遇到一个需要调用相册和打开相机的需求,但是,在Android 6.0以后,调用相册属于危险权限,需要开发者动态获取,这就意味着我们申请权限是与Activity绑定的,但如果一个 ...

  7. Java集合框架全解

    Collection 集合 集合接口有2个基本方法: public interface Collection<E> { //向集合中添加元素.如果添加元素确实改变了集合就返回 true, ...

  8. 网络安全日记 ① IIS 之web服务器搭建以及dns转发配置

    IIS(internet info server)服务器的搭建 创建iis服务 打开光驱 选择网络应用服务 安装iis和ftp(后面有讲) 配置服务 通过管理工具打开iis 2. 此时80端口就已经开 ...

  9. 数据库比对工具SQL(表、字段、触发器、索引、视图、存储过程)

    做一个数据库比对小工具,把SQL做一个笔记 SELECT object_id AS ID --表ID,'表' sType,Name --表名FROM sys.tablesORDER BY Name-- ...

  10. RHCAS_DAY06

    vi/vim文本编辑器 Vim是从 vi 发展出来的一个文本编辑器,vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性 vi/vim 共分为三种模式:命令模式.输入模式.底线命令模式(末 ...