本教程展示了如何创建一个ASP。网络核心MVC project to display images in a gallery using the LEADTOOLS JavaScript Library. In addition, the gallery will use thumbnails generated by the .NET LEADTOOLS library.
图像画廊将两个imageview对象。一个查看器将显示多个垂直布局的缩略图。当选择一个缩略图,全分辨率图像将作为一个单独的图像加载其他观众,平移和缩放的互动。
| 概述 | |
|---|---|
| 总结 | 本教程介绍了如何显示一个图像画廊在ASP。网的核心项目。 |
| 完成时间 | 60分钟 |
| Visual Studio项目 | 下载教程项目(365 KB) |
| 平台 | ASP。网络核心Web应用程序 |
| IDE | Visual Studio 2019 |
| 开发许可 | 下载LEADTOOLS |
熟悉的基本步骤,创建一个项目之前的工作创建一个图像画廊,ASP。网络核心教程,通过回顾如下:
在Visual Studio中,创建一个新的空ASP。网络核心Web应用程序项目。
的引用需要取决于项目的目的。可以添加NuGet参考引用。
对于这个项目,以下需要NuGet包:
Leadtools.Formats.Raster.Common
在解决方案资源管理器MVC结构,创建项目文件夹通过右键单击该项目,然后选择添加- >新文件夹。创建以下文件夹和子文件夹:
的观点
画廊
右键单击自由子文件夹中wwwroot目录并选择添加- >现有的项目。导航到< INSTALL_DIR > \ LEADTOOLS21 \ Bin \ JS路径和选择Leadtools.js文件。
这将增加Leadtools.js和所有其他JS文件依赖于它。
需要以下JS库,其余的可以删除:
Leadtools.jsLeadtools.Controls.js
在解决方案资源管理器,右键单击控制器文件夹并选择添加- >控制器。选择MVC控制器——空控制器选项和名称GalleryController.cs,然后单击添加。
在解决方案资源管理器,打开Startup.cs并使用下面的代码来配置项目使用MVC结构,使用静态文件,设置默认入口点到画廊视图。
公共类启动{/ /此方法由运行时调用。使用这种方法将服务添加到容器中。/ /关于如何配置您的应用程序的更多信息,请访问https://go.microsoft.com/fwlink/?LinkID=398940公共无效ConfigureServices (IServiceCollection服务){services.AddControllersWithViews ();}/ /此方法由运行时调用。使用这个方法来配置HTTP请求管道。公共无效配置(IApplicationBuilder应用,IWebHostEnvironment env){如果(env.IsDevelopment ()){app.UseDeveloperExceptionPage ();}app.UseStaticFiles ();app.UseRouting ();app.UseEndpoints(端点= >{endpoints.MapControllerRoute (名称:“默认”,模式:“{控制器=画廊}/ {action =指数}/ {id ?}”);});}}
许可解锁项目需要的特性。它必须设置工具箱函数被调用之前。细节包括教程不同的平台,请参考设置一个运行时许可。
有两种类型的运行时许可证:
请注意
添加LEADTOOLS引用和设置许可证。net中会详细介绍添加引用和设置一个许可证和JavaScript添加引用和设置一个许可证教程。
从。net和JavaScript库都使用在本教程中,LEADTOOLS许可证(LEADTOOLS.LIC)和LEADTOOLS JavaScript许可证(LEADTOOLS.lic.txt)在使用前需要设置组件库。
此外,JavaScript许可文件Leadtools.lic.txt需要放置在wwwroot / LEADTOOLS路径,以便它是可用的web应用程序。
在解决方案资源管理器,右键单击模型文件夹并选择添加- >新项目。选择类选择和名称GalleryImage.cs,然后单击添加。
该模型将图像的路径及其缩略图。这是用于画廊加载适当的形象的wwwroots /图片文件夹中。
使用系统;名称空间Create_an_Image_Gallery.Models{公共类GalleryImage{公共字符串ImagePath {得到;集;}公共字符串ThumbPath {得到;集;}}}
在解决方案资源管理器,打开GalleryController.cs。添加下面的部分的代码生成缩略图中每一个图像wwwroot /图片文件夹供画廊在web应用程序使用。
确保添加到下面的语句使用块顶部。
使用Microsoft.AspNetCore.Mvc;使用Microsoft.AspNetCore.Hosting;使用系统;使用System.Collections.Generic;使用System.Diagnostics;使用先;使用来;使用包含;使用System.Threading.Tasks;使用Leadtools;使用Leadtools.Codecs;使用Create_an_Image_Gallery.Models;
使用依赖注入来注入的一个实例IWebHostEnvironment接口将允许控制器加载的图片wwwroot /图片文件夹使用IWebHostEnvironment.WebRootPath在GenerateThumbnails下面的方法。
私人IWebHostEnvironment _hostingEnvironment;公共GalleryController (IWebHostEnvironment环境){_hostingEnvironment =环境;}
默认的Index ()行动将许可,生成缩略图,然后设置视图的web页面。
此外,一个列表的集合GalleryImage添加到模型显示数据稍后将通过的吗视图JavaScript代码。
公共IActionResult指数(){试一试{SetLicense ();显示数据(“GalleryImages”]= GenerateThumbnails ();返回视图();}抓(异常交货){返回StatusCode(500年,ex.Message);}}
的SetLicense ()方法将许可文件和关键如上所述生成缩略图时使用前LEADTOOLS类。
私人无效SetLicense (){字符串许可证=@“C: \ LEADTOOLS21 \支持\常见\许可证\ LEADTOOLS.LIC”;字符串关键= System.IO.File.ReadAllText (@“C: \ LEADTOOLS21 \支持\常见\许可证\ LEADTOOLS.LIC.KEY”);RasterSupport。SetLicense(许可证、关键);}
的GenerateThumbnails ()方法将生成一个缩略图画廊的web页面使用。每个图片的路径和缩略图是存储在一个GalleryImage模型,收集在一个列表,然后传递到显示数据正如上面提到的。
私人< GalleryImage > GenerateThumbnails列表(){IEnumerable <字符串> srcImages;varsrcImagesPath = Path.Combine (_hostingEnvironment.WebRootPath,“图片”);srcImages = Directory.GetFiles (srcImagesPath,“* *”。)。(s = > (! s.EndsWith (“_thumb.jpg”)));列出< GalleryImage > GalleryImages =新列表< GalleryImage > ();使用(RasterCodecs编解码器=新RasterCodecs ()){foreach(字符串imagePath在srcImages){使用(RasterImage图像= codecs.Load (imagePath)){RasterImage缩略图图像=。CreateThumbnail(300、300、形象。BitsPerPixel RasterViewPerspective。TopLeft RasterSizeFlags.Bicubic);字符串[]pathParts = imagePath.Split (' \ \ ');字符串文件名= pathParts [pathParts。长度- 1];字符串[]fileNameParts = fileName.Split (“。”);字符串thumbnailName = fileNameParts [0] +“_thumb.jpg”;编解码器。保存(缩略图,路径。结合(srcImagesPath thumbnailName)的形象。OriginalFormat,形象。BitsPerPixel, 1, 1, 1, CodecsSavePageMode.Overwrite);GalleryImages.Add (新GalleryImage {ImagePath = Path.Combine (“/图片”文件名),ThumbPath = Path.Combine (“/图片”,thumbnailName)});}}}返回GalleryImages;}
在解决方案资源管理器,右键单击画廊的子文件夹的观点目录并选择添加- >视图。选择Razor视图——空视图选择和名称Index.cshtml,然后单击添加。
视图将包含一个显示一个标题和标题回来按钮。身体将包含一个div元素作为一个查看器容器,最初将持有缩略图查看器。
的GalleryImages模态列表是强类型、序列化和分配给一个JS JavaScript代码所使用的变量site.js加载并设置适当的图像查看器。
<! DOCTYPE html><html lang =“en”=“高度:100%;><头><元charset =“utf - 8”/><meta name = " viewport "内容= "宽度=设备宽度,初始= 1.0”/><标题>@ViewData(“标题”)——LEADTOOLS相片画廊</标题><链接rel = "样式表" href = " ~ / css /网站。css " /></头><体风格= " margin: 0;最小高度:100%;显示:网格;”><div类= "包装"><头id = "头"><按钮类= " btn btn-default " type = "按钮" id =“btnBack”风格= " margin-top: 20 px;可见性:隐藏。”>回来</按钮><h2风格= " margin-left: 16 px”>LEADTOOLS相册</ h2></头><div class = "容器"风格= "高度:100%”><主要角色=“主要”类=“pb-3”风格=“高度:100%”><div id =“viewerContainer”风格= "高度:100%”><div id =“thumbnailDiv”类=“主要”=“高度:100%”></ div></ div></主要></ div></ div>@ model列表<Create_an_Image_Gallery.Models.GalleryImage><脚本>var galleryImages = @Html.Raw (Json.Serialize (@ViewData [" galleryImages "]));</脚本><脚本src = " ~ / lib / Leadtools.js "></脚本><脚本src = " ~ / lib / Leadtools.Controls.js "></脚本><脚本src = " ~ / js /网站。js" asp-append-version="true"></脚本></身体></ html>
在解决方案资源管理器,右键单击js的子文件夹wwwroot文件夹并选择添加- >新项目。选择JavaScript文件JS文件选项和名称site.js,然后单击添加。
添加以下代码为JS代码设置全局变量。
/ /观众和Div元素是全局变量var_thumbnailViewer;var_mainViewer;varthumbnailDiv;varmainDiv;
配置window函数设置许可,初始化观众,图片加载到各自的观众,和分配回来按钮的单击事件。
window=函数(){setLicense ();initThumbViewer ();initMainViewer ();addImages ();. getelementbyid (“btnBack”).addEventListener (“点击”、背);}
之前设置许可使用任何JavaScript LEADTOOLS API。
函数setLicense () {varlicenseUrl =“/ Leadtools / LEADTOOLS.lic.txt”;vardeveloperKey =“添加LEADTOOLS.lic.key的内容。txt文件”;lt.RasterSupport。集LicenseUri(licenseUrl, developerKey,函数(setLicenseResult){/ /检查许可证的状态如果(! setLicenseResult.result) {alert (“LEADTOOLS许可证是失踪,无效或过期\ nError: \ n”);}});};
请注意
JavaScript许可文件
Leadtools.lic.txt需要放置在wwwroot / LEADTOOLS路径,以便它是可用的web应用程序。
初始化_thumbnailViewer控制和设置选项显示缩略图画廊在垂直布局,允许选择和平移交互。
函数initThumbViewer () {/ /创建一个Div元素imageview JS控制thumbnailDiv = . getelementbyid (“thumbnailDiv”);varthumbnailCreateOptions =新lt.Controls.ImageViewerCreateOptions (thumbnailDiv);_thumbnailViewer =新lt.Controls.ImageViewer (thumbnailCreateOptions);/ /设置垂直和水平对齐,隐藏滚动条_thumbnailViewer.set_itemHorizontalAlignment (lt.Controls.ControlAlignment.center);_thumbnailViewer.set_viewHorizontalAlignment (lt.Controls.ControlAlignment.center);_thumbnailViewer.set_scrollMode (lt.Controls.ControlScrollMode.hidden);/ /设置纵向视图布局var布局=新lt.Controls.ImageViewerVerticalViewLayout ();布局。列= 0;_thumbnailViewer。viewLayout =布局;/ /设置PanZoom交互模式,这将允许平移的缩略图varpanZoomMode =新lt.Controls.ImageViewerPanZoomInteractiveMode ();panZoomMode.set_enableZoom (假);panZoomMode.set_mouseButtons (lt.Controls.MouseButtons.none);_thumbnailViewer.interactiveModes.add (panZoomMode);/ /设置选择交互模式,这将允许缩略图的选择和执行选择处理程序varselectItemsMode =新lt.Controls.ImageViewerSelectItemsInteractiveMode ();selectItemsMode.set_isEnabled (真正的);selectItemsMode.set_selectionMode (lt.Controls.ImageViewerSelectionMode.single);_thumbnailViewer.interactiveModes.add (selectItemsMode);_thumbnailViewer.add_selectedItemsChanged (handleSelection);/ /无效_thumbnailViewer.updateTransform ();_thumbnailViewer.invalidate (lt.LeadRectD.empty);}
使用下面的代码来创建div元素将举行_mainViewer控制显示的全分辨率图像画廊。
函数initMainViewer () {/ /创建一个Div元素的图像查看器mainDiv = document.createElement (“div”);mainDiv.setAttribute (“id”,“mainDiv”);mainDiv.setAttribute (“风格”,“高度:100%”);/ /添加到ViewerContainer Div、配置选项,然后删除。varviewerContainer = . getelementbyid (“viewerContainer”);viewerContainer.appendChild (mainDiv);varviewerCreateOptions =新lt.Controls.ImageViewerCreateOptions (mainDiv);_mainViewer =新lt.Controls.ImageViewer (viewerCreateOptions);_mainViewer.set_viewHorizontalAlignment (lt.Controls.ControlAlignment.center);_mainViewer.interactiveModes.add (新lt.Controls.ImageViewerPanZoomInteractiveMode ());viewerContainer.removeChild (mainDiv);}
加载图像缩略图画廊为缩略图查看器ImageViewerItem对象。全分辨率图像的URL存储在ImageViewerItem.Tag财产。
函数addImages () {_thumbnailViewer.items.clear ();_thumbnailViewer.beginTransform ();为(var我= 0;我< galleryImages.length;我+ +){/ /创建一个项目var项=新lt.Controls.ImageViewerItem ();/ /设置URL项。url = galleryImages[我].thumbPath;/ /全分辨率图像保存路径的项的标签项。标签= galleryImages[我].imagePath;/ /将其添加到查看器_thumbnailViewer.items.add(项);}_thumbnailViewer.endTransform ();_thumbnailViewer.invalidate (lt.LeadRectD.empty);}
使用以下代码handleSelection ()函数将处理当缩略图查看器中选择一个项目。处理程序会删除缩略图查看器div元素和附加的主要观众的div元素和显示分辨率图像。
函数handleSelection(发送者,e) {varfullResolutionImageFile;var项;/ /获取选中的项var项=这.items.getSelected ();为(var我= 0;我< items.length;我+ +){项=项目(我);fullResolutionImageFile = item.tag;打破;}/ /删除thumbnmail div容器div和添加查看器divvarviewerContainer = . getelementbyid (“viewerContainer”);varthumbnailDiv = . getelementbyid (“thumbnailDiv”);viewerContainer.removeChild (thumbnailDiv);viewerContainer.appendChild (mainDiv);/ /设置图片的查看器_mainViewer。imageUrl = fullResolutionImageFile;setBackButtonVisibility (真正的);_thumbnailViewer.remove_selectedItemsChanged (handleSelection);}
的代码回来按钮会反向通过删除主要查看器和附加缩略图查看器。
函数(){/ /删除查看器div和添加缩略图divvarviewerContainer = . getelementbyid (“viewerContainer”);viewerContainer.removeChild (mainDiv);viewerContainer.appendChild (thumbnailDiv);/ /取消选定的项目我们可以重新选择它为(var我= 0;我< _thumbnailViewer.items.count;我+ +){_thumbnailViewer.items.item(我)。isSelected =假;}_thumbnailViewer.add_selectedItemsChanged (handleSelection);_thumbnailViewer.invalidate (lt.LeadRectD.empty);setBackButtonVisibility (假);}函数setBackButtonVisibility(可见){varbackButton = . getelementbyid (“btnBack”);如果(可见){backButton.style。可见性=“可见”;}其他的{backButton.style。可见性=“隐藏”;}}
添加你想要的图片画廊wwwroot /图片文件夹中。按运行项目F5,或通过选择调试- >开始调试。
如果步骤正确之后,web应用程序将运行在浏览器中。添加图片的缩略图将生成并显示在缩略图查看器在垂直布局。
点击任何物品的主要负载全分辨率图像imageview控制,允许平移和缩放。
选择另一个形象的画廊,出版社回来。
本教程展示了如何创建一个图片库使用ASP。net和JavaScript库。网的核心项目。此外,它展示了如何使用。netCreateThumbnail ()方法,JSimageview对象,JSImageViewerItem对象。