In This Topic ▼

updateImage Method

Summary

Updates the HTML Image Element of an item.

Syntax

TypeScript

JavaScript

ImageViewerItems.prototype.updateImage =function(item,image,resolution)

updateImage(item:ImageViewerItem,image: HTMLImageElement,resolution:LeadSizeD):void;

Parameters

item

Item to update

image

New HTML Image Element. If this isnull, then the item will be empty after this method returns.

resolution

The resolution to use of the image in dots/inch (or DPI). A value of 0,0 orEmptymeans use the default image resolution which is 96 pixels.

Remarks

This method is a shortcut for updating theImageandResolutionproperties. It is equivalent to:

item.image = image;item.resolution = resolution;

UpdateElementis a shortcut for updating not onlyImage, but alsoElement, andCanvas. Passing a valid HTML Image Element toUpdateElementsets theImageproperty just asUpdateImagedoes. Similarly, passing a valid HTML5 Canvas Element toUpdateElementsets theCanvasproperty just asUpdateCanvasdoes. The item can have a value in only one ofImage,ElementorCanvas. Setting one value will automatically delete the values of the others.

Example

This example updates the active item's url with a new image.

UpdateImage.ts

ImageViewer.ts

UpdateImage.js

ImageViewer.js

UpdateImage.html

import{ ImageViewer_Example } from"../ImageViewer";exportclassImageViewerItems_UpdateImageExample {privateviewerExample;constructor() {this.viewerExample =newImageViewer_Example(this.run);}privaterun = (viewer: lt.Controls.ImageViewer) => {constimg = document.createElement("img");img.onload = () => {viewer.items.updateImage(viewer.activeItem, img, lt.LeadSizeD.create(96, 96));};img.src ="https://demo.leadtools.com/images/png/pngimage.png";}}

exportclassImageViewer_Example {// LEADTOOLS ImageViewer to be used with this exampleprotectedimageViewer: lt.Controls.ImageViewer =null;// Generic state value used by the examplespublictimesClicked:number= 0;constructor(callback?: (viewer: lt.Controls.ImageViewer) =>void) {// Set the LEADTOOLS license. Replace this with your actual license filelt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt","EVAL",null);// Create an image viewer inside the imageViewerDiv elementconstimageViewerDiv = document.getElementById("imageViewerDiv");constcreateOptions: lt.Controls.ImageViewerCreateOptions =newlt.Controls.ImageViewerCreateOptions(imageViewerDiv);this.imageViewer =newlt.Controls.ImageViewer(createOptions);this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;this.imageViewer.autoCreateCanvas =true;// Add Pan/Zoom interactive mode// Click and drag to pan, CTRL-Click and drag to zoom in and outthis.imageViewer.interactiveModes.add(newlt.Controls.ImageViewerPanZoomInteractiveMode());// Load an imagethis.imageViewer.imageUrl ="https://demo.leadtools.com/images/jpeg/cannon.jpg";this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9,this.imageViewer.defaultZoomOrigin);constexampleButton = document.getElementById("exampleButton");exampleButton.addEventListener("click", () => {this.timesClicked++;// Run the exampleif(callback)callback(this.imageViewer);});}}

import{ ImageViewer_Example } from"../ImageViewer";exportclassImageViewerItems_UpdateImageExample {viewerExample;constructor() {this.viewerExample =newImageViewer_Example(this.run);}run = (viewer) => {constimg = document.createElement("img");img.onload = () => {viewer.items.updateImage(viewer.activeItem, img, lt.LeadSizeD.create(96, 96));};img.src ="https://demo.leadtools.com/images/png/pngimage.png";}}

exportclassImageViewer_Example {// LEADTOOLS ImageViewer to be used with this exampleimageview =null;// Generic state value used by the examplestimesClicked = 0;constructor(callback) {// Set the LEADTOOLS license. Replace this with your actual license filelt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt","EVAL",null);// Create an image viewer inside the imageViewerDiv elementconstimageViewerDiv = document.getElementById("imageViewerDiv");constcreateOptions =newlt.Controls.ImageViewerCreateOptions(imageViewerDiv);this.imageViewer =newlt.Controls.ImageViewer(createOptions);this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;this.imageViewer.autoCreateCanvas =true;// Add Pan/Zoom interactive mode// Click and drag to pan, CTRL-Click and drag to zoom in and outthis.imageViewer.interactiveModes.add(newlt.Controls.ImageViewerPanZoomInteractiveMode());// Load an imagethis.imageViewer.imageUrl ="https://demo.leadtools.com/images/jpeg/cannon.jpg";this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9,this.imageViewer.defaultZoomOrigin);constexampleButton = document.getElementById("exampleButton");exampleButton.addEventListener("click", () => {this.timesClicked++;// Run the exampleif(callback)callback(this.imageViewer);});}}

"en">Controls Example | UpdateImage




Press and drag on the image to pan.Hold down the control key and press and drag on the image or pinchwithtwo fingers to zoominand out.
"imageViewerDiv">"output">

Requirements

Target Platforms

Reference

ImageViewerItems Class

ImageViewerItems Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 21.0.2021.7.2

Leadtools.Controls Assembly

Introduction

开始

Namespaces

Leadtools.Controls Namespace

Assemblies