run Method (original) (raw)
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 easily
imageLoader["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 result
public 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 end
imageLoader.dispose();
}
}
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.
imageRasterUrl = "http://demo.leadtools.com/images/gif/clock.gif";
imageSvgUrl = "http://demo.leadtools.com/images/svg/lazio.svg";
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
}
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 = 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 easily
imageLoader["parent"] = target.parent;
imageLoader.run();
});
}
// Before the imageLoader is run, we can do what we like.
preRun(imageLoader, preRunEventArgs) {
// 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.
done(imageLoader) {
// 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.
fail(imageLoader) {
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 result
always(imageLoader) {
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 end
imageLoader.dispose();
}
}
<!doctype html>
<html lang="en">
<title>LEADTOOLS Example | ImageLoader</title>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="../../LT/Leadtools.js"></script>
<style>
body {
font-family: 'Arial', 'Helvetica', sans-serif;
margin: 5px 5px 5px 5px;
}
#imagesHolder {
visibility: hidden;
}
table {
text-align: center;
}
th {
width: 250px;
}
</style>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<!-- The element used by the imageLoader to do extra loading (hidden) -->
<div id="imagesHolder"></div>
<h4>Open your browser's developer tools to see how these images differ in the DOM.</h4>
<h4>You will need CORS-enabled images for AJAX.</h4>
<!-- Where we want to put our result -->
<table>
<thead>
<tr>
<th></th>
<th>Raster</th>
<th>SVG</th>
</tr>
</thead>
<tbody>
<tr>
<th>Image Url</th>
<td id="rasterImageUrl"></td>
<td id="svgImageUrl"></td>
</tr>
<tr>
<th>Ajax Data Url</th>
<td id="rasterAjaxDataUrl"></td>
<td id="svgAjaxDataUrl"></td>
</tr>
<tr>
<th>Ajax Xml</th>
<td id="rasterAjaxXml"></td>
<td id="svgAjaxXml"></td>
</tr>
</tbody>
</table>
</body>
<script>
window.onload = () => new window.examples.ImageLoader().run();
</script>
</html>