HTML5 Default Image Settings Creating Image Viewer

#1 Posted : Wednesday, July 26, 2017 8:32:09 AM(UTC)

jgp137

Groups: Registered
Posts: 4

I am working with an MVC app with your HTML5 version. When I create the imageViewer object how do I specify defaults for rotateAngle and size mode? Currently, when I specify both options only the size mode works and the rotate angle doesn't. Can you provide a sample?

Note: I also want to default the Invert color interactive mode along with the two above.

#2 Posted : Thursday, July 27, 2017 4:59:49 PM(UTC)

Joe Z

Groups: Registered, Tech Support, Administrators
Posts: 63

Thanks: 2 times
Was thanked: 4 time(s) in 4 post(s)

To specify defaults such as rotateAngle, sizeMode, and Image Processing Commands, you would need to add the appropriate calls to your onLoad call.

For example, your onLoad should be similar to the code below. The ImageViewer.zoom method is used to set a default sizeMode. Additionally, the ImageViewer.rotateAngle and Image Processing Command would need to be added within the ImageViewer itemChanged event handler.

For more information regarding Image Processing Commands within our HTML5 ImageViewer, take a look at the following forum post that may give you more information.
https://www.leadtools.co...-in-JavaScript#post42883

Code:

	function window_onload() 
		{      
			var imgViewerDiv = document.getElementById("imageViewerDiv");
			var createOptions = new lt.Controls.ImageViewerCreateOptions(imgViewerDiv); 
			g_ImageViewer = new lt.Controls.ImageViewer(createOptions);
		    g_ImageViewer.autoCreateCanvas = true;
			g_ImageViewer.itemError.add(function (sender, e) {
			    if (e.data) { alert("Error loading " + e.data.srcElement.src); }
			    else { alert("Error loading document"); }
			});

			g_ImageViewer.scrollMode = lt.Controls.ControlScrollMode.Auto;
		    g_ImageViewer.imageUrl = "LEADTOOLS.JPG";		
			g_ImageViewer.zoom(lt.Controls.ControlSizeMode.fitHeight, g_ImageViewer.scaleFactor, g_ImageViewer.defaultZoomOrigin);

			g_ImageViewer.itemChanged.add(function(sender, e) {
				if(e.reason == lt.Controls.ImageViewerItemChangedReason.url) {
				g_ImageViewer.rotateAngle = 90;		
				invertCommand(g_ImageViewer);
				}
			});
		}
	
		function invertCommand(g_ImageViewer) {

			var myCanvas = g_ImageViewer.canvas;
			var context = myCanvas.getContext("2d"); 
			var imageProcessing = new lt.ImageProcessing(); 
			imageProcessing.jsFilePath = "Leadtools.ImageProcessing.Color.js"; 
			imageProcessing.command = "Invert"; 
			imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height); 
			imageProcessing.completed.add(function(sender, e) { 
			   context.putImageData(e.imageData, 0, 0); 
			   g_ImageViewer.invalidate(lt.LeadRectD.empty);
			}); 
			imageProcessing.run(); 
		}

Joe Zhan
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 account or Register a new forum account.

Notification

HTML5 Default Image Settings Creating Image Viewer