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

Notification

Icon
Error

Options
View
Last Go to last post Unread Go to first unread post
#1 Posted : Friday, June 16, 2017 4:10:39 PM(UTC)

Hadi  
Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

Was thanked: 12 time(s) in 12 post(s)

Attached is a sample Web project using only JavaScript and HTML showing how to use the FileReader JavaScript class alongside the LEADTOOLS HTML5 ImageViewer control to load an image from the client's machine into the browser.

Note: This will only work with browser supported images (JPEG / PNG / GIF)

Here is the code:

HTML:
Code:
<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <meta charset="utf-8" /> 
   <title>LEADTOOLS Demo</title> 
   <!-- LEADTOOLS Libraries --> 
   <script type="text/javascript" src="Scripts/Leadtools.js"></script> 
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script> 
   <script type="text/javascript" src="Scripts/App.js"></script> 
</head> 
<body> 
   <input type="file" id="imageLoader" name="imageLoader"/><br/>
   <div id="imageViewerDiv" style="width: 600px; height: 600px; background-color: darkgray; float:left"></div> 
</body> 
</html> 


JavaScript:
Code:
var imageViewer;
var item;

window.onload = function () { 
	InitViewers();
	var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
}; 

function InitViewers(){
	var imageViewerDiv = document.getElementById("imageViewerDiv"); 
    var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
    imageViewer = new lt.Controls.ImageViewer(createOptions); 
	imageViewer.items.clear();
	item = new lt.Controls.ImageViewerItem();
    item.imageSize = lt.LeadSizeD.create(500, 500);
    imageViewer.items.add(item);
}

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
			item.size = lt.LeadSizeD.create(img.width, img.height);
			item.image = img;
			imageViewer.invalidate(lt.LeadRectD.empty);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

File Attachment(s):
JavaScript Loading.zip (477kb) downloaded 208 time(s).

Edited by user Monday, June 19, 2017 2:45:41 PM(UTC)  | Reason: Not specified

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

LEAD Logo
 

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.042 seconds.