本教程展示如何应用图像处理技术在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.js
Leadtools.Controls.js
Leadtools.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);
}
});
/ /创建查看器2
imageViewerDiv1 = . 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
对象。