HOW TO: Load an image from client system without a backend

#1 Posted : Friday, June 16, 2017 4:10:39 PM(UTC)

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.


	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

HOW TO: Load an image from client system without a backend