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网上的讲解例子不多,所以一开始很困惑,外文官网看的我也很崩溃,现在基本能使用了,就打算写篇博客看能不能帮助到别人,可以说它除了要花钱,其他什么都好,哎
myScript调研,电子手写板使用,纯干货的更多相关文章
- 360手机助手内部资料曝光,63张PPT纯干货
360手机助手内部资料曝光,63张PPT纯干货 日前,国内最大的安卓应用商店360手机助手发布了<2016年手机软件行业趋势绿皮书>,这份绿皮书对2015年以来移动互联网的趋势做了总结,展 ...
- 【转】纯干货:PS高手完全自学宝典(原创文章)
文章版权:Tommy子言 原创 一. 一切从基础开始 强大的PS虽然功能众多,但归纳起来主要有三大功能: 修图——主要包括纯图片的修饰.合成.3D合成等等: 画图——主要是指用PS来绘画.广告插画, ...
- IT技术学习指导之Linux系统入门的4个阶段(纯干货带图)
IT技术学习指导之Linux系统入门的4个阶段(纯干货带图) 全世界60%的人都在使用Linux.几乎没有人没有受到Linux系统的"恩惠",我们享受的大量服务(包括网页服务.聊天 ...
- Java程序员的日常——经验贴(纯干货)
工作当中遇到的事情比较杂,因此涉及的知识点也很多.这里暂且记录一下,今天遇到的知识点,纯干货~ 关于文件的解压和压缩 如果你的系统不支持tar -z命令 如果是古老的Unix系统,可能并不认识tar ...
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像.超链接相关标签,实现图文并茂的页面 (4):会 ...
- mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)
最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...
- (纯干货)最新WEB前端学习路线汇总初学者必看
Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...
- 纯干货:深度学习实现之空间变换网络-part2
https://www.jianshu.com/p/854d111670b6 纯干货:深度学习实现之空间变换网络-part1 在第一部分中,我们主要介绍了两个非常重要的概念:仿射变换和双线性插值,并了 ...
- 纯干货:Linux抓包命令集锦
/******************************************************************************************* 版权声明* 本 ...
- 【转】mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)
mongoDB 学习笔记纯干货(mongoose.增删改查.聚合.索引.连接.备份与恢复.监控等等) http://www.cnblogs.com/bxm0927/p/7159556.html
随机推荐
- ls仅列出当前目录下的所有目录
ls -d */ -d仅列出目录本身,而不列出其中的内容 *通配符,所有的字符 /目录的标识
- 高版本(8以上)tomcat不支持rest中的delete和put方式请求怎么办
出现问题 当我们去访问delete方式和put方式: 后来才知道tomcat8以上是不支持delete方式和put方式 解决方法: 在跳转目标的jsp头文件上改为(加上了isErrorPage=&qu ...
- 安装geatpy库到指定的conda虚拟环境中
在Anaconda Prompt中输入conda install geatpy,提示找不到这个库: 输入pip install geatpy,安装成功:但是安装在默认conda环境下(以下为pycha ...
- Java程序员必学知识点
JVM无论什么级别的Java从业者,JVM都是进阶时必须迈过的坎.不管是工作还是面试中,JVM都是必考题.如果不懂JVM的话,薪酬会非常吃亏(近70%的面试者挂在JVM上了) 详细介绍了JVM有关于线 ...
- JavaScript之DOM、DOM树
一 DOM JavaScript操作网页的接口,全称为"文档对象模型"(Document Object Model). 有这几个概念:文档.元素.节点 整个文档是一个文档节点 每个 ...
- Android开发在Activity外申请权限调用相机打开相册
问题描述: 最近在项目中遇到一个需要调用相册和打开相机的需求,但是,在Android 6.0以后,调用相册属于危险权限,需要开发者动态获取,这就意味着我们申请权限是与Activity绑定的,但如果一个 ...
- Java集合框架全解
Collection 集合 集合接口有2个基本方法: public interface Collection<E> { //向集合中添加元素.如果添加元素确实改变了集合就返回 true, ...
- 网络安全日记 ① IIS 之web服务器搭建以及dns转发配置
IIS(internet info server)服务器的搭建 创建iis服务 打开光驱 选择网络应用服务 安装iis和ftp(后面有讲) 配置服务 通过管理工具打开iis 2. 此时80端口就已经开 ...
- 数据库比对工具SQL(表、字段、触发器、索引、视图、存储过程)
做一个数据库比对小工具,把SQL做一个笔记 SELECT object_id AS ID --表ID,'表' sType,Name --表名FROM sys.tablesORDER BY Name-- ...
- RHCAS_DAY06
vi/vim文本编辑器 Vim是从 vi 发展出来的一个文本编辑器,vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性 vi/vim 共分为三种模式:命令模式.输入模式.底线命令模式(末 ...