TypeScript
JavaScript
References ▼
Specifies the mode by which the image or XML will be loaded.
lt.ImageLoaderUrlMode = {imageUrl: 0,ajaxDataUrl: 1,ajaxXml: 2}
| Value | Member | Description |
|---|---|---|
| 0 | ImageUrl | Set the url to the src attribute of the workingImageElement. This is the typical way to load an HTML Image Element. |
| 1 | AjaxDataUrl | Use an XMLHttpRequest (via xhr) to load the image or SVG as binary data. |
| 2 | AjaxXml | Use an XMLHttpRequest (via xhr) to load the image or SVG directly. |
Use ImageLoaderUrlMode with the urlMode property. The chosen enumeration value dictates how the url will be loaded to create the resulting element.
There are three distinct ways an image can be loaded:
|
imageUrl |
ajaxDataUrl |
ajaxXml |
|
|---|---|---|---|
|
Description |
imageUrl loads an image the way most people would expect: by creating a new HTML Image Element and setting the |
ajaxDataUrl loads an image using |
ajaxXml loads XML using XMLHttpRequest, meaning it also supports the options from ajaxOptions. This method is the only one that will load SVG in its full format, instead of as an SVG-as-IMG (with the HTML Image Element holding the SVG). As the name implies, arbitrary XML can also be loaded, though normal web-safe image file types cannot. |
|
For Images |
imageUrl is the best option for loading web-safe image file types. This method works in every browser and is the fastest. |
ajaxDataUrl will request the image as binary data. In most cases, loading will be slower as the data must be converted to a Blob type and then reloaded. This method does, however, hold the advantage of allowing AJAX customization in the form of headers and data via ImageLoaderAjaxOptions in an ajaxOptions object. You can also view and modify the returned binary data with processAjaxData. |
ajaxXml will fail for normal web-safe images, since it expects XML. However, should the url point to a server that can return an SVG element as a wrapper to the image as its only child, the ImageLoader will be able to load and return only that image as an HTML Image Element. In this case, the image inside the SVG can be either embedded or linked. |
|
For SVG |
imageUrl loads an SVG inside of an HTML Image Element. For browser security reasons, any images inside the SVG must not be linked images. The SVG image renders quickly, but memory consumption can be high and native SVG functions (such as text selection) are lost. |
ajaxDataUrl also loads SVG inside of an HTML Image Element, using AJAX. The data is returned as binary, so additional processing time is required. As with imageUrl, any images inside the SVG must not be linked images. The SVG image renders quickly, but memory consumption can be high and native SVG functions (such as text selection) are lost. |
ajaxXml loads the SVG in its native XML format, using AJAX. This format works in all browsers, but rendering can be slow and the DOM can become congested. SVG will have all native functionality, such as attribute editing and text selection. |
|
For XML |
imageUrl fails when trying to load XML. |
ajaxDataUrl fails when trying to load XML. |
ajaxXml allows XML to be retrieved from an endpoint via AJAX, though with the same caveats as loading an SVG: slow rendering and a much larger DOM size. |
If the URL to be loaded is a data URL, it will always be loaded as ImageLoaderUrlMode.imageUrl.
export class ImageLoaderExample {// We will show the results of loading a raster web image and SVG in all three supported loading modes.// Insert URLs to raster (GIF, PNG, JPG) and SVG images below. The images must have CORS properties for AJAX.private imageRasterUrl: string = "http://demo.leadtools.com/images/gif/clock.gif";private imageSvgUrl: string = "http://demo.leadtools.com/images/svg/lazio.svg";constructor() {lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);}public run = () => {const targets = [// Raster images{ parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageRasterUrl },{ parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageRasterUrl },{ parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageRasterUrl },// SVG images{ parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageSvgUrl },{ parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageSvgUrl },{ parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageSvgUrl },];targets.forEach((target) => {const imageLoader: lt.ImageLoader = new lt.ImageLoader();imageLoader.urlMode = target.mode;imageLoader.url = target.url;// If we're loading with AJAX, attach a header or even change to a POST request (endpoint must have proper CORS properties)//if (target.mode === lt.ImageLoaderUrlMode.ajaxDataUrl || target.mode === lt.ImageLoaderUrlMode.ajaxXml) {//imageLoader.ajaxOptions.headers["myKey"] = "myValue";//imageLoader.ajaxOptions.method = "POST";//imageLoader.ajaxOptions.headers["contentType"] = "application/json";//imageLoader.ajaxOptions.postData = JSON.stringify({ key: "value" });//}imageLoader.preRun.add(this.preRun);imageLoader.done.add(this.done);imageLoader.fail.add(this.fail);imageLoader.always.add(this.always);// Add the target ID to the loader so we can use it in our callbacks easilyimageLoader["parent"] = target.parent;imageLoader.run();});}// Before the imageLoader is run, we can do what we like.public preRun(imageLoader, preRunEventArgs): void {// Optional: we can set "abort" to true to make the imageLoader fail.//preRunEventArgs.cancel = true;console.log("ImageLoader about to run: " + imageLoader.url);}// When we're done, append the image to our page.public done(imageLoader): void {// For this example, we set an extra property as a target ID.const parent = document.getElementById(imageLoader["parent"]);const textElement = document.createElement("p");textElement.innerHTML = (imageLoader.isHTMLImageElement ? "<img>" : "<svg>") + " width: " + imageLoader.width + ", height: " + imageLoader.height;parent.appendChild(imageLoader.element);parent.appendChild(textElement);}// If we failed, show the error.public fail(imageLoader): void {const parent = document.getElementById(imageLoader["parent"]);const textElement = document.createElement("p");textElement.innerHTML = imageLoader.error;parent.appendChild(textElement);console.error(imageLoader.error);}// Do some cleanup, regardless of the resultpublic always(imageLoader): void {imageLoader.preRun.remove(this.preRun);imageLoader.done.remove(this.done);imageLoader.fail.remove(this.fail);imageLoader.always.remove(this.always);// Call dispose at the very endimageLoader.dispose();}}