本教程展示如何应用图像处理技术在HTML5 JavaScript应用程序使用LEADTOOLS SDK。
| 概述 | |
|---|---|
| 总结 | 本教程介绍了如何使用图像处理命令在一个HTML5 JavaScript应用程序。 |
| 完成时间 | 15分钟 |
| Visual Studio项目 | 下载教程项目(947 KB) |
| 平台 | JS的Web应用程序 |
| IDE | Visual Studio代码——客户端 |
| 开发许可 | 下载LEADTOOLS |
熟悉基本的步骤创建一个项目的审查添加引用和设置许可证——HTML5 JavaScript教程,在工作之前图像处理应用到一个图像,HTML5的JavaScript教程。
本教程使用了http服务器控制台命令,运行一个静态文件服务器。安装http服务器第一次安装node . js然后安装http服务器。
从项目中创建的副本添加引用和设置许可证——HTML5 JavaScript教程。如果项目是不可用,按照这个教程中的步骤创建它。
的引用需要取决于项目的目的。可以通过添加引用. js文件位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS。
对于这个项目,还需要以下引用:
Leadtools.jsLeadtools.Controls.jsLeadtools.ImageProcessing.Color.js确保这些文件复制到项目的自由文件夹中。
对于一个完整的列表的JS应用程序所需文件,请参考文件包含在您的应用程序
许可解锁项目需要的特性。它必须设置工具箱函数被调用之前。细节包括教程不同的平台,请参考设置一个运行时许可。
有两种类型的运行时许可证:
打开你的项目的index . html文件。添加以下代码导入LEADTOOLS依赖性,LEADTOOLS逻辑,并设置ImageViewers的容器。
<! DOCTYPE html><html lang = "恩" xmlns = " http://www.w3.org/1999/xhtml "><头><元charset =“utf - 8”/><标题>LEADTOOLS演示</标题><!——LEADTOOLS库><type = " text / javascript脚本“src =“lib / Leadtools.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Controls.js”></脚本><type = " text / javascript脚本“src =“app.js”></脚本></头><身体><div风格= "浮动:左”><div id =“imageViewerDiv1”风格= "宽度:600 px;身高:600 px;background - color: darkgray”></ div><标签id = " viewer1Label ">查看器1</标签></ div><div><div id =“imageViewerDiv2”风格= "宽度:600 px;身高:600 px;背景颜色:浅灰色></ div><标签id = " viewer2Label ">查看器2</标签></ div></身体></ html>
打开app.js文件位于项目文件夹。创建3个新功能app.js文件命名InitViewers (),loadimage (),转化(观众)。调用InitViewers ()和loadimage ()在onload函数,如下见过。
让viewer1 =零;让viewer2 =零;窗口。onload=函数(){/ /如果你有一个JS许可证(LEADTOOLS.LIC.TXT)和密钥文件(LEADTOOLS.LIC.KEY.TXT),您可以使用下面的代码来设置您的许可常量licenseUrl =”。/ LEADTOOLS / LEADTOOLS.lic.txt”;常量developerKey =“添加LEADTOOLS.lic.key的内容。txt文件”;/ /如果你是评估和没有JS许可证或密钥文件,您可以使用下面的代码来设置您的许可:/ / const licenseUrl = " https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt ";/ / const developerKey = EVAL”;lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult){/ /检查许可证的状态如果(setLicenseResult.result) {console.log (“LEADTOOLS客户许可设置成功”);}其他的{常量味精=“LEADTOOLS许可证是失踪,无效或过期\ nError: \ n”;console.log(味精);警报(味精);}});InitViewers ();loadimage ();};
将下面的代码输入到相应的函数来创建两个ImageViewers负载样本PNG文件,然后应用转化的第一个imageview图像处理。
函数InitViewers () {/ /创建查看器1让imageViewerDiv1 = . getelementbyid (“imageViewerDiv1”);让createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv1);viewer1 =新lt.Controls.ImageViewer (createOptions);viewer1。autoCreateCanvas =真正的;viewer1.zoom (lt.Controls.ControlSizeMode。fitWidth 1 viewer1.defaultZoomOrigin);viewer1.itemChanged.add (函数(发送者,e) {如果(e。原因= = lt.Controls.ImageViewerItemChangedReason.url) {转化(viewer1);}});/ /创建查看器2imageViewerDiv1 = . getelementbyid (“imageViewerDiv2”);createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv2);viewer2 =新lt.Controls.ImageViewer (createOptions);viewer2。autoCreateCanvas =真正的;viewer2.zoom (lt.Controls.ControlSizeMode。fitWidth 1 viewer1.defaultZoomOrigin);viewer2.itemChanged.add (函数(发送者,e) {如果(e。原因= = lt.Controls.ImageViewerItemChangedReason.url) {viewer2。rotateAngle = 180;}});}函数loadimage () {/ /加载图像查看器viewer1。imageUrl =“图像/ PngImage.png”;viewer2。imageUrl =“图像/ PngImage.png”;}函数转化(观众){/ /反转命令处理常量myCanvas = viewer.canvas;常量上下文= myCanvas.getContext (“二维”);常量imageProcessing =新lt.ImageProcessing ();imageProcessing。jsFilePath =“脚本/ Leadtools.ImageProcessing.Color.js”;imageProcessing.command =“反转”;imageProcessing。imageData =上下文。getImageData (0, 0, myCanvas。宽度,myCanvas.height);imageProcessing.completed.add (函数(发送者,e) {context.putImageData (e。imageData, 0, 0);viewer.invalidate (lt.LeadRectD.empty);});imageProcessing.run ();}
打开命令行控制台cd成项目的根。使用以下命令运行一个静态文件服务器:http服务器
服务器应该启动和运行http://localhost: 8080。消息应该出现在控制台显示所有服务器上可用的端口。
打开你的浏览器,并导航到:http://localhost: 8080 / index . html
本教程展示了如何应用图像处理到图像使用ImageProcessing对象和显示图像imageview对象。