Web应用的TWAIN扫描识别工具Dynamic Web TWAIN新增组件完善图像的处理

增

新增光栅化PDF插件，可将PDF文本转化为图像，方便在查看器中查看PDF文档。
新增DataMatrix阅读器插件，支持图像数据矩阵的读取。
新增PDF417插件,可从图像中读取PDF417代码。
新增CloseWorkingProcess方法用于结束当前HTML5扫描进程。

改进

改进了打印方法，现可通过 Windows本地打印程序打印图像。
改进了上传机制，如果服务器返回的字符串只包含不可见字符，则指示上传成功。
通过优化扫描进程提高了扫描的性能。

修复

修复了关于在MAC浏览器打开多个扫描页面时，不显示扫描源的漏洞。
修复了关于产品安装文件夹的HTML/JS样本运行失败（除非演示部署到HTTP服务器）的漏洞。
修复了关于用户在点击选择来源对话框的取消时，返回值错误的漏洞。
修复了关于当通过所有路径加载本地图像时， OnPostLoad event 事件不触发的漏洞。
修复了默认启动扫描日志的漏洞。该漏洞可能会影响HTML扫描的性能。
其他小的修复和调整。

购买最新正版授权！"咨询在线客服"

慧都年终盛典火爆开启，一年仅一次的最强促销，破冰钜惠不容错过！！

本站文章除注明转载外，均为本站原创或翻译

TML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah

本文导航
-新标签和元素 …… 08%
-HTML5 的高级功能 …… 16%

-地理位置 …… 16%
-网络存储 …… 33%
-应用缓存（AppCache） …… 44%
-视频 …… 50%
-音频 …… 61%
-画布（Canvas） …… 71%

-HTML5 工具 …… 78%

编译自： http://opensourceforu.com/2017/06/introduction-to-html5/
作者： Palak Shah
译者： geekpi

HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。

HTML5 的新功能是：

新标签，如 <header> 和 <section>
用于 2D 绘图的 <canvas> 元素
本地存储
新的表单控件，如日历、日期和时间
新媒体功能
地理位置

HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。

新标签和元素

语义化元素：图 1 展示了一些有用的语义化元素。
表单元素： HTML5 中的表单元素如图 2 所示。
图形元素： HTML5 中的图形元素如图 3 所示。
媒体元素： HTML5 中的新媒体元素如图 4 所示。

图 1：语义化元素

图 2：表单元素

图 3：图形元素

图 4：媒体元素

HTML5 的高级功能

`地理位置`

这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

公共交通网站
出租车及其他运输网站
电子商务网站计算运费
旅行社网站
房地产网站
在附近播放的电影的电影院网站
在线游戏
网站首页提供本地标题和天气
工作职位可以自动计算通勤时间

工作原理：地理位置通过扫描位置信息的常见源进行工作，其中包括以下：

全球定位系统（GPS）是最准确的
网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址
GSM/CDMA 蜂窝 ID
用户输入

该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：

if (navigator.geolocation) {
// do stuff
}

getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

语法是：

getCurrentPosition(showLocation, ErrorHandler, options);

showLocation：定义了检索位置信息的回调方法。
ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。
options （可选）：定义了一组用于检索位置信息的选项。

我们可以通过两种方式向用户提供位置信息：测地和民用。

描述位置的测地方式直接指向纬度和经度。
位置信息的民用表示法是人类可读的且容易理解。

如下表 1 所示，每个属性/参数都具有测地和民用表示。

图 5 包含了一个位置对象返回的属性集。

图5：位置对象属性

`网络存储`

在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。

与 Cookie 相比，Web 存储的优点是：

更安全
更快
存储更多的数据
存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。

有两种类型的 Web 存储对象：

本地 - 存储没有到期日期的数据。
会话 - 仅存储一个会话的数据。

如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。

这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。

下面给出了使用 Web 存储对象的语法：

存储一个值：

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";

得到一个值：

alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);

删除一个值： -removeItem("key1");
删除所有值：

localStorage.clear();

`应用缓存（AppCache）`

使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。

应用缓存的优点是：

网页浏览可以脱机
页面加载速度更快
服务器负载更小

cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示：

<html manifest="test.appcache">
...
</html>

它应该在你要缓存的所有页面上。

缓存的应用程序页面将一直保留，除非：

用户清除它们
manifest 被修改
缓存更新

`视频`

在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前，video 元素支持三种视频格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>
<html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。

video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示：

<video width="320" height="240" controls="controls">
<source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>

图6：Canvas 的输出

`音频`

对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>
<html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。

audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示：

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>

`画布（Canvas）`

要在网页上创建图形，HTML5 使用画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle = "red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>

以上脚本的输出如图 6 所示。

你可以绘制许多对象，如弧、圆、线/垂直梯度等。

HTML5 工具

为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。

以下是一些帮助创建很棒的网站的必要工具。

HTML5 Maker：用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。
Liveweave：用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。
Font dragr：在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。
HTML5 Please：可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。
Modernizr：这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。
Adobe Edge Animate：这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。
Video.js：这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。
The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。
HTML5 Reset：此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。

Palak Shah

作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国荣誉推出

点击“了解更多”可访问文内链接

段时间小编发现，HTML5似乎满足了广告主对移动营销的大部分需求，从形式到功用、到传播，有人观望，更有人已抢了鲜，在2014年HTML5营销案例也层出不穷。大到可口可乐、维多利亚的秘密这种敢于尝鲜的大牌，小到知乎推出的一本新书，各种品牌和产品都在尝试利用HTML5进行营销。那么H5到底可以怎么玩?让我们一起来看看吧。

主题派

主题传播永远是品牌的重要传播诉求，但无论是新闻稿还是软文拿到社交媒体上来，与其他形式纷繁的讯息进行PK，总是感觉弱弱的，这个时候HTML5就可以华丽丽出场了。在原有专题的基础上，加之互动以及其他适配小屏幕的素材，一个声情并茂的HTML5主题就可以制作完成。可以预期的是，将有越来越多的媒体和企业会采用此种形式推介某个主题或是亮点。可口可乐已先行使用HTML5形式传播品牌主题：如用一条红线重现一个品牌经历的岁月，在简洁的线条世界里，可口可乐描绘了一段历史，整个时间轴随着用户向上滑动页面“绘制”而成。“我们在乎”——可口可乐中国可持续发展报告，一份枯燥的报告也可以变身轻盈，适应移动端观看及分享的需求，以更活泼的形式在朋友圈被热转。

案例链接：腾讯大会邀请函

2014年11月8日，腾讯就在世人面前高调地玩了一把科技感。在WE大会现场中，不但有唯美的星空画风和首页由远及近的宇宙效果，还增加了指纹识别的科技互动元素。最重要的是游戏规则：将应用邀请发给好友，300秒之内，双方在各自手机上同时按下指纹，验明正身后获得邀请码。这种手机端接连现场的技术十分抢眼，可以让与会者享受到被重视的礼遇，还有瞬间通电的感觉。这款邀请函不只是实现了人机互动，更是实现了双屏互动，运用了一次社群思维。

游戏派

爱玩是人类的天性，好游戏吸引用户参与没有问题，但当游戏遇上营销，就难免生死未卜了，弄不好就破坏了游戏体验，引火上身。像《围住神经猫》只是因为接入了广告文字链，就结束了一款游戏绚烂而又短暂的生命，于朋友圈销声匿迹。

所以想要利用游戏进行营销一定要做到谨慎、巧妙。目前HTML5游戏营销主要是两种形式，一种是品牌推出游戏，游戏依附于品牌，一般为知名品牌;另一种为游戏先行，产品藏匿于游戏之中，这种则是一些新产品或是新品牌。像杜蕾斯、维多利亚的秘密就属于前者，推出符合品牌特点的一些小游戏，将品牌与游戏进行深度融合，如将经典游戏中的元素换为品牌标识或是产品，使用户在玩游戏的过程中加深对品牌的认知。而《财务包子铺》则是后者的典型代表，成为HTML5小游戏中的一匹黑马。

案例链接：《财务包子铺》背后的那本书

测试一下自己的创业成功指数?在这个人人吵着要创业的年代，大多数人都会对这个测试跃跃欲试吧，心里想着：我的创业天赋可不能就此埋没。于是由知乎制作的小游戏《财务包子铺》在微信朋友圈里迅速流传，玩家以创业老板的身份，对自己的包子铺的日常经营做出决策。听上去没什么特别，但游戏中专门设置了机制，比如用户如果决策失误，就会收到破产警告，需要选择一本救命书——就是知乎要借此推广的《金钱有术》。续命之后可以继续游戏，让玩家对新书留下初步印象，又不会中断游戏。游戏上线三天后，《金钱有术》这本书成为亚马逊图书销售总榜冠军，同时还是预售冠军、新书冠军、经济类冠军，仅在游戏里点击“购买秘籍”这一选项的独立用户数就有55万。怎么样，设计得如此天衣无缝，就算有人知道是“软游戏”了，但还是愿意为这本书买单。

活动派

有粉丝的地方就有活动，社交媒体风行后，品牌活动大规模转移到微博、微信上来，真实的社交关系链，对于有奖活动来说是最好的人气资源。相对于微博上的关注和转发有礼，以及微信朋友圈转发集赞等，使用HTML5开发出的有奖互动活动形式会更新颖和多变，同时也可以发挥HTML5的多项营销优势，如互动性强，在活动中开发出各种与用户的互动形式;功用性好，奖品对于用户来说就是最实际的刺激和诱惑;传播性广，独乐乐不如众乐乐，发现了既好玩又有奖品拿的好事，当然要好朋友一起分享。

案例链接：索尼七夕送“小青心”

在2014年七夕期间，索尼就用HTML5开发了活动页面，强力推出一款新品——清新范儿十足的小青心索尼C3手机。在活动期间，只要关注索尼Xperia官方微信进入游戏，将在页面“邂逅”专属幸运四叶草，分享活动到微信朋友圈，邀请4位好友帮助拆开礼盒，点亮小青心幸运四叶草，即可获得抽奖资格，索尼为此一共准备了77台小青心索尼C3智能手机。七夕是年轻人的节日，整个活动将小青心标签与七夕相结合，踩准节日营销的时间点，同时环节中设置需要4位好友帮助，也使社交传播链得到了几何式铺开。

功能派

在前文中已经提到，想用户之所想才能够有效“黏住”用户，使得HTML5营销得到转化，不论什么时候，只要实用，总会有人点击、有人转发，这也是HTML5营销最需要的推动力。在功能性HTML5开发方面，百度可谓屡试不爽，如先后推出iBreath智呼吸、手机告全体主人书、北京地铁计算器等产品，这几款产品无一不是戳中了用户的“痛点”：健康、手机使用、地铁涨价，这都是实实在在的需求点。以手机告全体主人书为例，你是否已经看够了那些枯燥的文字叙述，也厌烦了毫无新意的小互动，这组页面几乎每页都根据要表现的内容增加了趣味十足的动画效果，将说明书变成了“动画片”。

案例链接：百度iBreath智呼吸

这款HTML5的slogan为：人呼出的气体和指纹一样独一无二。此语一出，就让人对自己的呼吸充满了好奇，具体操作也很简单：手机水平放好，然后深呼吸，对着手机下方吹气。几秒钟之后，通过大数据分析，你的健康值就会被测算出来，会列出用户的呼吸气体成分详细数据，还会分析出用户的健康情况，如肺部感染症状以及相应的健康改善建议等等。

更多精彩内容，请关注互联网分析沙龙微信：techxue 每天为您推送最新、最热干货！

互联网分析沙龙——互联网人的实战分享平台，一个为您提供专业的商业模式、产品、数据、用户、电子商务、社会化媒体、移动互联网等深度分析的信息网站！请在微信公众账号中搜索「techxue」，或用手机扫描左方二维码，即可获得互联网分析沙龙每日精华内容推送和最优搜索体验，并参与编辑活动。

在线咨询

上一篇：前端入门-html 中如何使用图片
下一篇：给大家分享HTML中的一些干货

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商