Welcome Guest! To enable all features, please Login or Register.



Last Go to last post Unread Go to first unread post
#1 Posted : Thursday, December 20, 2018 4:43:28 PM(UTC)
Pawel L.

Groups: Registered, Manager, Tech Support, Administrators
Posts: 14


Today we are slightly going to be altering the Working with Automated annotations demo, in order to be able to dynamically change the ImageViewer from the demo.
The original demo can be found here: https://www.leadtools.com/help/leadtools/v20/dh/javascript/to/working-with-automated-annotations.html

We are going to slightly change the code in this demo so that when we get an attribute change, we can set imageViewer.imageUrl to the attribute that has been changed. In this case, that attribute is the source of the image being rendered in the container of the image viewer.
Without the MutationObserver, we would end up either statically setting the image viewer to a single URL, or pass in null, in which case the annotation container will not render on the ImageViewer.
Let's say we want to use a button to load a certain image. The button's click handler would take care of setting the source of the image in the ImageViewer div to a predetermined string.


var myImage = document.getElementById("myImage");
myImage.src = "https://example.com/sample.png";

This would usually only set the source of the image, however, by slightly modifying the demo, we are able to dynamically change the source of the ImageViewer itself!

window.onload = function() {
   // Get the container DIV  
   var imageViewerDiv = document.getElementById("imageViewerDiv");
   // Create the image viewer inside it  
   var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
   var imageViewer = new lt.Controls.ImageViewer(createOptions);
   // Add handler to show an alert on errors  
   imageViewer.itemError.add(function(sender, e) {
      alert("Error loading " + e.data.srcElement.src);
   // Since we are setting the imageURL of imageViewer to null, the annotations will not be
   // useable with the initial window.onload event, until the value is changed.
   imageViewer.imageUrl = null;

   //Now we add the mutation Listener
   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver
                          || window.MozMutationObserver;

   // Input the ID of the image that you are changing the source of via an external handler
   var myImageElement = document.querySelector(‘#myImage’);

   var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
         if (mutation.type === “attributes”)
            imageViewer.imageUrl = myImageElement.src;
   observer.observe(myImageElement, {
      attributes: true

   // Rest of demo code

After this is done, later in the demo when automationControl.imageViewer is set to imageViewer, it inherits the newly changed source attribute of the element variable which is set to document.querySelector("#myImage")
It is important to note, that in order for this to work without a CORS error, you must make sure that your project is hosted.
File Attachment(s):
AutomatedAnnotationsMutationObserver.zip (540kb) downloaded 128 time(s).

Pawel Lyko
Developer Support Engineer
LEAD Technologies, Inc.


Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads

Wanna join the discussion? Login to your LEADTOOLS Support accountor Register a new forum account.

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.086 seconds.