在本主题▼< / div >< div id ="inThisTopicDialog" class="hide">

总结

语法

属性值

讲话

例子

需求

另请参阅

参考

url属性

总结< / div >

与该项关联的图像数据的URL。

语法< / div >< div id ="mainSourceContainerSyntax">

打印稿< / div >

JavaScript< / div >< / div >

Object.defineProperty (ImageViewerItem.prototype“url”，得到:函数()，设置:函数(值)）

url:字符串；

属性值

与此项关联的图像的URL。默认值为零．

讲话< / div >

一个Url可以通过两种方式设置:

直接加载一个新的图像到ImageViewerItem．下面将更详细地讨论此事件。
在内部，当HTML图像元素进入视图后从其URL重新加载时AutoRemoveItemElements是真的。

对于以下情况图像，元素,或帆布设置为AutoRemoveItemElements是假的,Url将为空。

属性的成员时所采取的操作取决于该项是否已经是imageview(意思是它被添加到项目)．如果项不是图像查看器的一部分，则Url将使用新值设置，并且在将项目添加到图像查看器之前，将不会发生下面描述的操作。

当此属性在外部设置为加载新图像时，值为零时，所有先前的图像数据立即删除:元素，图像,帆布都设置为零，使ImageViewerItem空的。的价值决议会不变。

如果新值不是零，一个新的图像将载入内部使用ImageLoader．的价值LoadImageUrlMode将决定如何Url加载。图像加载是异步执行的，当图像加载完成时，UI将更新。的ImageLoading类提供了供用户钩子到ImageLoader在映像加载开始之前修改任何设置，包括设置额外的回调。

当装载完成时(Image.load发生),Url属性将使用传递的原始值更新。历年数据图像，元素,或帆布将删除和替换为图像对象，取决于图像加载的类型ImageLoaderUrlMode．的价值决议如果有的话，也将使用传递的值进行更新。当这一切完成后，ItemChanged将发生与信息的项目和原因设置为ImageViewerItemChangedReason。Url．

如果加载过程中发生错误，ItemError将触发有关错误的信息。Url，图像，帆布,决议将不会更新，并且仍将保存原始数据。

项目可以使用浏览器支持的任何图像数据。这包括JPEG、PNG或SVG图像数据(直接)、TIFF (Internet Explorer)，或使用LEADTOOLS REST服务从任何类型的文档(如PDF或Microsoft Office格式)返回兼容的图像数据。

的价值AutoCreateCanvas将决定是否图像或帆布更新属性。如果此值为假(默认值)，然后img上面描述的(或通过用户传递的)将被设置在图像为是。如果值为真正的然后是内存中帆布创建，并且img被渲染成这样帆布然后被丢弃。由此产生的帆布存储在帆布财产。

的ImageUrl的属性imageview是否会更新此属性ActiveItem中使用查看器时单品模式．

有关更多信息，请参阅图像查看器项目．

例子< / div >

这个例子创建了一个带有url的新项目。

Url.ts< / div >

ImageViewer.ts< / div >

Url.js< / div >

ImageViewer.js< / div >

Url.html< / div >< / div >< div id ="GenericContainerEntry6681" class="GenericContainerEntry">

进口{ImageViewer_Example}从“. . / imageview”；出口类ImageViewerItem_UrlExample {私人viewerExample;构造函数() {这.viewerExample =新ImageViewer_Example (这.run);｝私人run =(查看器:lt.Controls.ImageViewer) => {viewer.items.clear ();常量item: lt.Controls.ImageViewerItem =新lt.Controls.ImageViewerItem ();项。url =“https://demo.leadtools.com/images/png/pngimage.png”；viewer.items.add(项);｝｝

出口类ImageViewer_Example {//在这个例子中使用的LEADTOOLS ImageViewer受保护的imageViewer: lt.Controls.ImageViewer =零；//示例使用的一般状态值公共timesClicked:数量= 0;构造函数(回调?:(查看器:lt.Controls.ImageViewer) =>无效) {//设置LEADTOOLS license。用实际的许可证文件替换此文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”，“EVAL”，零）;//在imageViewerDiv元素中创建一个图像查看器常量imageViewerDiv = document.getElementById(“imageViewerDiv”）;常量createOptions: lt.Controls.ImageViewerCreateOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的；//增加Pan/Zoom交互模式//点击拖动可平移，CTRL-Click拖动可放大缩小这.imageViewer.interactiveModes.add (新lt.Controls.ImageViewerPanZoomInteractiveMode ());//加载图像这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”；这.imageViewer.zoom (lt.Controls.ControlSizeMode。健康,9,这.imageViewer.defaultZoomOrigin);常量exampleButton = document.getElementById(“exampleButton”）;exampleButton.addEventListener (“点击”， () => {这.timesClicked + +;//运行示例如果(回调)回调(这.imageViewer);})；｝｝

进口{ImageViewer_Example}从“. . / imageview”；出口类ImageViewerItem_UrlExample {viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);｝Run = (viewer) => {viewer.items.clear ();常量项=新lt.Controls.ImageViewerItem ();项。url =“https://demo.leadtools.com/images/png/pngimage.png”；viewer.items.add(项);｝｝

出口类ImageViewer_Example {//在这个例子中使用的LEADTOOLS ImageViewerimageview =零；//示例使用的一般状态值timesClicked = 0;构造函数(回调){//设置LEADTOOLS license。用实际的许可证文件替换此文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”，“EVAL”，零）;//在imageViewerDiv元素中创建一个图像查看器常量imageViewerDiv = document.getElementById(“imageViewerDiv”）;常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的；//增加Pan/Zoom交互模式//点击拖动可平移，CTRL-Click拖动可放大缩小这.imageViewer.interactiveModes.add (新lt.Controls.ImageViewerPanZoomInteractiveMode ());//加载图像这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”；这.imageViewer.zoom (lt.Controls.ControlSizeMode。健康,9,这.imageViewer.defaultZoomOrigin);常量exampleButton = document.getElementById(“exampleButton”）;exampleButton.addEventListener (“点击”， () => {这.timesClicked + +;//运行示例如果(回调)回调(这.imageViewer);})；｝｝

<！doctype html >< html lang =“en”>控制示例| Url




 . Url< >头< script src =“https://code.jquery.com/jquery-2.2.4.min.js”诚信=“sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = "crossorigin =“匿名”> < /脚本>< script src =“. . / . . / LT / Leadtools.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Controls.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Engine.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Designers.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Rendering.Javascript.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Automation.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Main.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Color.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Core.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Effects.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Document.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Document.Viewer.js”> < /脚本><时尚>身体{字体类型:“Segoe UI”无衬线;｝# imageViewerDiv {边框:1px实体#888;宽度:500 px;身高:500 px;background - color: # eee;｝> < /风格<！——所有的演示文件都被捆绑并附加到窗口——>< script src =“. . / . . / bundle.js”类型=“text / javascript”> < /脚本>< / >头身体< >按下并拖动图像平移
按住控制键并在图像上拖动或捏与用两个手指缩放在。< / p >< div ><按钮类型=“按钮”id =“exampleButton”> > < /按钮运行示例< / div >< div id =“imageViewerDiv”> < / div >< div id =“输出”> < / div >身体< / >< >脚本窗口。Onload = () => {常量示例=新window.examples.ImageViewerItem.Url ();};> < /脚本< / html >

需求< / div >目标平台

另请参阅< / div >

参考

ImageViewerItem类

ImageViewerItem成员

Leadtools。控件名称空间

下载我们的免费评估

Leadtools。控制装置< / div >

简介

开始

名称空间

Leadtools。控件名称空间

程序集