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前端實戰項目案例獲取方式：轉發關注+私信菜菜 “ 教程 ”

游戲類