本教程展示了如何使用React.JS中的LEADTOOLS SDK加载、显示和保存图像。< / p >< div类＝"compactcontainer">
| 概述 | |
|---|---|
| 总结 | 本教程将介绍如何在React JS应用程序中加载、显示和保存图像。 |
| 完成时间 | 15分钟 |
| Visual Studio项目 | 下载教程项目(473 KB) |
| 平台 | React JS Web应用程序 |
| IDE | Visual Studio代码-客户端 |
| 开发许可 | 下载LEADTOOLS |
| 用另一种语言试试 |
|
步骤熟悉创建项目的基本步骤添加引用和设置License教程，在工作之前在图像查看器中显示图像- React JS教程。确保安装了Yarn，以便React应用程序可以通过命令行快速创建。如果未安装Yarn，可从以下位置获取:< / p >< p >https://classic.yarnpkg.com/en/docs/install/#windows-stable
要创建项目结构，打开命令行控制台和cd到要创建项目的位置。然后执行如下命令:< / p >Yarn创建response -app appname
所需要的参考资料取决于项目的目的。对于这个项目，需要以下JS文件，并位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS：< / p >
Leadtools.jsLeadtools.Controls.js确保将两个文件复制到公众\常见文件夹中导入公众\ index . html文件。< / p >< p >
许可证解锁项目所需的特性。它必须在调用任何工具箱函数之前设置。有关详细信息，包括针对不同平台的教程，请参阅设置运行时License．< / p >< p >有两种类型的运行时许可证:< / p >
请注意
中详细介绍了添加LEADTOOLS本地引用和设置许可添加引用和设置License教程。
随着项目的创建、引用的添加和许可的设置，编码就可以开始了。< / p >< p >开放公共\ \ ltlogic.js常见文件。创建ltlogic.js是由添加引用和设置License教程。在set license调用之后添加下面的代码以初始化图像查看器．< / p >< div类＝"genericCodeContainer codeContainer JavaScriptGeneric">
窗口。onload =函数() {varlicenseUrl =”。/ Leadtools / LEADTOOLS.lic.txt”；vardeveloperKey =添加你的LEADTOOLS.lic.key.txt文件的内容；lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult) {//查看license状态如果(setLicenseResult.result) {console.log ("LEADTOOLS客户端许可证设置成功"）;let ImageViewerDiv = document.getElementById(“imageViewerDiv”）;ImageViewerDiv。风格=“高度:350 px;宽度:350 px;“；常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的；这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”；｝其他的｛var味精=“LEADTOOLS许可证丢失，无效或过期\nError:\n”；console.log(味精);警报(味精);｝})；｝
开放src \ App.js文件，然后用下面的代码修改HTML:< / p >< div类＝"genericCodeContainer codeContainer JavaScriptGeneric">
进口反应从“反应”；进口标志从”。/ logo.svg '；进口”。/ App.css '；函数应用(){返回（< div className =“应用程序”><头className =“App-header”>< div类＝“tutorial-image”>“App-logo”alt =“标志”/ > < / div >
< p >加载和保存一个图像的例子< / p >下面的图像查看器
< input type =“文件”id =“文件输入”接受=“jpg, jpeg, png”输入> < / ><按钮id =“addToViewer”> . >添加图像到查看器<一个id =“下载”下载=“new-image-name.jpg”>保存图像< div id =“imageViewerDiv”> < / div >头> < /< / div >）;｝出口默认的应用程序;
在ltlogic.js在ImageViewer初始化代码之后添加以下代码:< / p >< div类＝"genericCodeContainer codeContainer JavaScriptGeneric">
varfileList = document.getElementById(“文件输入”）;var下载= document.getElementById(“下载”）;varbtn = document.getElementById(“addToViewer”）;btn。点击= (函数() {//创建迭代器varI = 0;//最初将我们的目标设置为上传文件的第一个子，然后迭代它//可以加载后续图像。varfiles = fillist .files[i];varnewUrl = window.URL.createObjectURL(files);imageview。imageUrl =新Url;下载。风格= (“显示:块;”）;下载。href = newUrl;我+ +;})；
打开命令行控制台，然后cd到React项目的根目录。从那里，运行纱线开始．< / p >< p >这将构建React应用程序，以及imageview将被加载到浏览器中。< / p >< div类＝“tutorial-image”>
加载一个新的RasterImage到imageview,点击选择文件然后选择一个图像。然后按将图像添加到查看器显示图像。单击，导出镜像保存图像图像将开始下载。< / p >< p >
本教程展示了如何加载、显示和保存图像。此外，还展示了如何使用imageview对象。< / p >< p >
