LEADTOOLS HTML5图像教程

介

零空间占用图像应用程序的概念已经出现了一段时间，越来越多的人在日常任务中开始依赖移动设备和平板电脑，这个概念又重新流行了起来。平台和操作系统的多样性是一个挑战。相同的应用程序会运行在任意的桌面、平板电脑或移动设备上，在HTML5中采用Canvas元素是这个问题的完美解决方案，同时增加了你的潜在客户群，减少了开发和支持的工作。

LEADTOOLS现在包括一个可用于文档和医学图像的JavaScript SDK。LEAD科技为程序员提供拥有最新图像技术的程序友好的开发工具包已经20多年。专注于最新移动设备和平板电脑的开发者现在可以将强大的图像技术如OCR、条码、图像显示和处理、DICOM、PACS等添加至移动app。

LEADTOOLS SDK中HTML5 DICOM查看器的主要功能

跨平台图像查看的HTML5/JavaScript查看器控件
可以运行在任意台式机、平板电脑或移动设备上，支持HTML5
支持鼠标和多触控（手势）输入
交互模式包括：
基于物理单元和逻辑单元的图像显示
内置的图像操作：
本地化的HTML5图像注释和标记
扩展LEADTOOLS RESTful Web服务，添加高级功能如扩展的文件格式支持（如TIFF、PDF、DOC、DICOM等）、OCR和条码
使用窗位和元数据从本地存档或任意远程PACS显示DICOM图像
包含源码的功能完整的DICOM查看应用程序，易于定义和品牌化

包含HTML5技术的SDK产品

HTML5代码

在下面的例子中，我们将为您展示如何将HTML5 / JavaScript查看器控件添加到一个web页面，如何加载一个图像并设置一些交互模式。此外，我们将使用图像格式RESTful web服务的JSON加载一个非web格式如PDF。

HTML5/JavaScript查看器控件

HTML5库的主要HTML5对象是Canvas。与LEADTOOLS JavaScript库结合，图像画布能够以所有标准的UI功能显示一个图像，包括平移、缩放、放大镜、中心等。所有的交互模式都可以在台式机、平板电脑和手机上正常无缝工作，且支持鼠标和多点触控手势输入（如缩放）。

为了在一个HTML文档中添加查看器控件，你需要的只是一个包装器div和在页面加载时运行的几行JavaScript代码，剩下的LEADTOOLS会帮你完成！

你可以在标准

标签中加载一个JPEG、PNG 或GIF，在div中封装，然后你就能拥有一个具有滚动条的基本“图像查看器”。这就是交互模式起作用的地方，为查看器提供了丰富的UI功能如放大镜以及在触摸屏（或鼠标上的Ctrl + Click）上平移、缩放的能力。在HTML中添加按钮后，你必须修改事件处理器上的运行方法。

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
   // 将交互模式设置为PanZoom
   var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode;
   _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
  
var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
   // 将交互模式设置为MagnifyingGlass
   var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode;
   interactiveModeMagGlass.set_borderThickness(5);
   _viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);

RESTful Web服务

REST不是新技术，它是HTTP 1.0 和1.1的一部分，但是许多web应用程序已经远离了它。然而，当使用零空间占用时，客户端应用程序使用HTML5和JavaScript，由于它能与 JavaScript对象注释（JSON）进行简单交互，因此REST是一个更好的选择。

LEADTOOLS为图像格式（如下所示）、OCR、条码和图像处理提供了RESTful web服务。图像格式web服务可以接收任意图像，将它转化为web可显示的格式，然后将它返回给查看器。这意味着一个人可以加载和显示LEADTOOLS支持的150多种格式中的任意一种。

你可以调用REST服务并手动解析JSON，获取图像信息如宽度、高度等。这也并不总是必要的，但是，查看器可以简单的将它传递给服务URL，完成所有这些工作。

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
   // 这是我们想要加载的图像
  var imageUrl ="http://demo.leadtools.com/images/pdf/leadtools.pdf"; // 将它添加到REST服务加载方法中 var restLoad ="http://localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" + imageUrl; // 在查看器中设置它 _viewer.set_imageUrl(restLoad); },

总结

LEADTOOLS为开发者提供了全世界一流的稳定图像库，易于使用的高级编程接口让业务关键型应用程序的快速开发变为可能。

HTML5和RESTful Web服务只是LEADTOOLS提供的若干技术中的一个。若想了解我们产品的更多信息，欢迎访问我们的主页，下载功能完整的试用版SDK，在试用期间欢迎您使用我们的免费技术支持。

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

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

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

习前端还是很有趣的，因为可以较快的上手，然后自己开发一些好玩的项目来练手，并且网上也可以搜集很多关于前端开发的小项目，可还是新手的你，在学习的时候不知道可以做什么，以及怎么做；因此，就整理了一些前端资料，希望可以帮助正在学习前端的小伙伴。为了方便你，大概把前端可以做的项目分为三类：

•游戏类

•实用类

•好玩类

然后依次推荐一些项目资料，想要学习的小伙伴可以看看~

游戏类

其实很多常见的小游戏都是纯前端开发出来的，比如曾经风靡的2048、别踩白块啊等等，简单有趣，对于初学者来说，这些小游戏是非常不错的练手项目。

网页版2048

项目通过搭建一个网页版的 2048 ，让大家学习 web 应用程序的开发流程、以及如何让应用在移动端自适应处理以应对各种大小的屏幕，布局和初始化，编写游戏的逻辑、实现让它能移动，判定结果。

是不是和我们玩的2048一模一样呀，O(∩_∩)O~

HTML5两步实现拼图游戏

项目使用HTML5和css3实现的九宫格拼图游戏。只要两步既可以实现炫酷的效果和动画。详细的讲解，让你清楚地知道每一句代码的作用。自己开发完之后还可以玩玩，告诉你，你可以开发它，但是玩可不一定行哦~

网页版扫雷

项目实现一个Web版本的扫雷游戏，通过该项目将学习并实践 JavaScript 和 CSS 等基本的Web开发知识。

看着就有想玩的冲动啊，有木有~

网页版-别踩白块游戏

项目用最基础的html，css，以及原生的JavaScript实现一个网页版本的“别踩白块”游戏。

做完后可以试着玩玩，看看速度如何，太快或者太慢都可以随时调整。

HTML5实现抓怪物小游戏

项目利用 HTML5 的 Canvas 特性，结合 js 来开发一个抓小怪物的小游戏。从中我们可以学习到如何用 HTML5 来构建一个 WebApp。

JavaScript打地鼠游戏

项目为打地鼠，是大家耳熟能详的一款经典的小游戏，用前端技术来实现这个游戏，简单有趣。

JavaScript按键控制坦克移动

项目使用javascript按键控制坦克在网页上移动，通过使用很简单的，清晰明了的代码使坦克在页面上平滑的移动，通过学习，可以掌握javascript的按键操作，从而让页面更好的与用户互动。

看效果图很简单，但是只要稍微发挥你的想象力，把坦克改成其他的物体，就可以变成其他的小游戏了，比如加一个迷宫，就是走出迷宫游戏了。

实用类

前面介绍了前端开发游戏的项目教程，当然前端还可以开发一些非常实用的功能，比如小到网站的导航条啊，一个抽奖页面啊等等，这些在网页上经常看到的页面展示功能，基本都是前端开发出来的，因此，下面介绍一些比较实用的前端项目教程。

CSS与JavaScript实现选项卡

这个项目实现前端网页经常用到的 Tab 选项卡效果。主要用到 HTML、CSS 和 JavaScript 技术，比较适合前端入门练习。

一起来抽奖吧

一到各种节假日就各种的抽奖活动数不胜数，大奖很丰厚，但是，你懂得。这个项目教大家使用CSS3来制作一个抽奖转盘，一窥抽奖转盘的秘密。

Java和WebSocket开发网页聊天室

WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这个项目使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。

瀑布流加载图片墙

项目通过瀑布流加载图片墙，实现无限图片展示的效果，类似百度图片一样的加载方式，体现图片的交错排列。从中学习在没有后端开发者提供数据的背景下，由我们前端自己模拟数据及数据接口，自己就能给自己提供任何自己想要的数据。

canvas实现放大镜效果

项目由 HTML5 的 canvas 实现放大镜效果，和淘宝图片放大器类似的效果，主要依靠 canvas 中的 drawImage() 函数，希望能通过实现这个简单的项目来让大家初步认识 canvas ，学会基本的 canvas 操作。

用CSS和jQuery打造一个简单的图片编辑器

项目利用 CSS 的 filter 和简单的 Jquery 代码来实现一个简单的图片编辑器包括对图片的透明度，黑白，图片亮度等调节。

120行代码实现简单的即时搜索

项目利用 Meteor 和 MongoDB 实现一个简单的即时搜索服务。通过本项目将学习到 Mongodb 数据库的操作，Meteor 快速制作 Web App。

纯前端打造实时markdown编辑器

项目通过纯前端打造一个实时 markdown 编辑器，用到的库或框架主要有 marked，Ace，highlight.js，Bootstrap。通过本实验学习如何编写一个 web 应用程序的相关知识。

CSS3实现“红包照片”模糊效果

微信朋友圈里的红包照片，还有 ios7 带来的“毛玻璃”菜单效果都很吸引眼球，该项目就尝试用熟悉的 CSS3 来实现这个效果。

使用 Electron 编写跨平台桌面应用

该项目主要学习如何用 Electron 配合 JavaScript 等 web 技术创建跨 Linux/Windows/macOS 平台的桌面应用。

好玩类

前端还可以用比较简单的方式实现一些可爱的东西，比如暖男-大白，萌宠-小黄人等等，只要你能想到的，几乎都可以用前端来实现，下面就介绍几个项目教程。

打造网页版「大白」

该项目利用 HTML 和 CSS 来打造《超能陆战队》里的 “暖男” -「大白」。学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象的样式。

JavaScript实现玫瑰花

项目学习如何在网页中如何使用JavaScript语言实现一朵漂亮的玫瑰花。其中会用到html，css，javascript等技术。

这个玫瑰花的最后效果是慢慢开放和显现出来的，很浪漫的赶脚啊~

SCSS（SASS）画小黄人

项目通过 SCSS（SASS）画一个会眨眼睛的小黄人，主要学习 CSS3。其中将涉及 SASS 安装，代码的编写，以及绘制小黄人的相关结构逻辑。

看完以上3个项目，你能想象都是用前端来实现的么，O(∩_∩)O~

源码可以私信我哦

以上呢，介绍了那么多的前端开发项目，如果你还说你找不到项目，不知道做什么，没有完整的教程，那么就是你的不对了，所以，挑选一个感兴趣的项目开始学习吧！

eb前端还是很有趣的，可以较快的上手然后自己开发一些好玩的项目来练手，网上也可以一抓一大把关于前端开发的小项目，可是还是有新手在学习的时候不知道可以做什么，以及怎么做，因此，实验楼就整理了一些前端项目教程，希望可以帮助正在学习前端的小伙伴。

为了方便阅读，大概把前端可以做的项目分为三类：

游戏类
实用类
好玩类

然后依次推荐一些项目教程，想要学习的小伙伴可以看看~

web前端实战项目案例获取方式：转发关注+私信菜菜 “ 教程 ”

游戏类