纱线开始。< / p >< p >这将构建应用程序反应,imageview将会加载到浏览器。< / p >< div类=“tutorial-image”>
本教程展示如何加载,显示和保存图像在React.JS使用LEADTOOLS SDK。< / p >< div类="compactcontainer">
| 概述 | |
|---|---|
| 总结 | 本教程介绍了如何加载,显示和保存图像在反应JS应用程序。 |
| 完成时间 | 15分钟 |
| Visual Studio项目 | 下载教程项目(206 KB) |
| 平台 | 反应JS Web应用程序 |
| IDE | Visual Studio代码——客户端 |
| 开发许可 | 下载LEADTOOLS |
| 试试用另一种语言 |
|
熟悉基本的步骤创建一个项目的审查添加引用和设置一个许可证教程,在工作之前显示图像的图像查看器,JS反应教程。确保安装纱,这样应用程序可以创建反应迅速通过命令行。如果纱线没有安装,它可以从以下位置:< / p >< p >https://classic.yarnpkg.com/en/docs/install/ windows-stable
创建项目结构打开命令行控制台和cd到要创建的项目的位置。然后运行以下命令:< / p >纱创建react-app浏览器名称
的引用需要取决于项目的目的。对于这个项目,需要以下JS文件,位于< INSTALL_DIR > \ LEADTOOLS21 \ Bin \ JS:< / p >
Leadtools.jsLeadtools.Controls.js确保两个文件复制到公众\常见文件夹和导入它们公众\ index . html文件。< / p >< p >
许可解锁项目需要的特性。它必须设置工具箱函数被调用之前。详情,包括教程为不同的平台,请参考设置一个运行时许可。< / p >< p >有两种类型的运行时许可证:< / p >
请注意
添加LEADTOOLS本地引用和设置许可中会详细介绍添加引用和设置一个许可证教程。
与项目创建、添加引用,许可,可以开始编码。< / p >< p >开放公共\ \ ltlogic.js常见文件。创建ltlogic.js覆盖着的添加引用和设置一个许可证教程。添加下面的代码后,调用初始化设置许可证图像查看器。< / p >< div类="genericCodeContainer codeContainer JavaScriptGeneric">
窗口。onload =函数(){varlicenseUrl =”。/ Leadtools / LEADTOOLS.lic.txt”;vardeveloperKey =“添加LEADTOOLS.lic.key的内容。txt文件”;lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult) {/ /检查许可证的状态如果(setLicenseResult.result) {console.log (“LEADTOOLS客户许可设置成功”);让ImageViewerDiv = . getelementbyid (“imageViewerDiv”);ImageViewerDiv。风格=“高度:350 px;宽度:350 px;“;常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewVerticalAlignment = lt.Controls.ControlAlignment.center;这.imageViewer。viewHorizontalAlignment = 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”> < img src ={标志}className =“App-logo”alt =“标志”/ > < / div >< p >加载和保存一个形象的例子< / p >< / p > < p >下面的图像查看器< input type =“文件”id =“文件输入”接受=“jpg, jpeg, png”> < /输入><按钮id =“addToViewer”>添加图像查看器> < /按钮<一个id =“下载”下载=“new-image-name.jpg”> < / >保存图像< div id =“imageViewerDiv”> < / div >< /头>< / div >);}出口默认的应用程序;
在ltlogic.js文件中,添加以下代码imageview后初始化代码:< / p >< div类="genericCodeContainer codeContainer JavaScriptGeneric">
var文件列表= . getelementbyid (“文件输入”);var下载= . getelementbyid (“下载”);varbtn = . getelementbyid (“addToViewer”);btn。onclick = (函数(){/ /创建迭代器var我= 0;/ /最初设定我们的目标的第一个子节点上传文件,然后进行迭代/ /可以加载在后续的图像。var文件= fileList.files[我];varnewUrl = window.URL.createObjectURL(文件);imageview。imageUrl =新Url;下载。风格= (“显示:块;”);下载。href = newUrl;我+ +;});
打开命令行控制台,然后cd到项目反应的根源。从那里,运行纱线开始。< / p >< p >这将构建应用程序反应,imageview将会加载到浏览器。< / p >< div类=“tutorial-image”>
加载一个新的RasterImage到imageview,点击选择文件并选择一个映像。然后按添加图片查看器显示图像。导出图片点击保存图像和图像将开始下载。< / p >< p >
本教程展示了如何加载,显示和保存图像。此外,它展示了如何使用imageview对象。< / p >< p >
