本教程展示了如何创建一个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.js
Leadtools.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和添加查看器div
varviewerContainer = . getelementbyid (“viewerContainer”);
varthumbnailDiv = . getelementbyid (“thumbnailDiv”);
viewerContainer.removeChild (thumbnailDiv);
viewerContainer.appendChild (mainDiv);
/ /设置图片的查看器
_mainViewer。imageUrl = fullResolutionImageFile;
setBackButtonVisibility (真正的);
_thumbnailViewer.remove_selectedItemsChanged (handleSelection);
}
的代码回来按钮会反向通过删除主要查看器和附加缩略图查看器。
函数(){
/ /删除查看器div和添加缩略图div
varviewerContainer = . 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
对象。