Display Images in an Image Viewer - React JS

This tutorial shows how to load, display, and save images using the LEADTOOLS SDK in React.JS.

Required Knowledge

Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License tutorial, before working on the Display Images in an Image Viewer - React JS tutorial. Make sure that Yarn is installed so that the React application can be created quickly via the command line. If Yarn is not installed, it can be obtained from the following location:

https://classic.yarnpkg.com/en/docs/install/#windows-stable

Create the Project and Add LEADTOOLS References

To create the project structure open the command line console and cd into the location where the project is to be created. Then run the following command:

The references needed depend upon the purpose of the project. For this project, the following JS files are needed and located at <INSTALL_DIR>\LEADTOOLS21\Bin\JS:

• Leadtools.js
• Leadtools.Controls.js

Make sure to copy both files to the public\common folder and import them in the public\index.html file.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

• Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
• Deployment license. If a Deployment license file and developer key are required, refer to Obtaining a License.

Note

Adding LEADTOOLS local references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Initialize the Image Viewer

With the project created, the references added, and the license set, coding can begin.

Open public\Common\ltlogic.js file. Creation of ltlogic.js is covered in the Add References and Set a License tutorial. Add the code below after the set license call to initialize the Image Viewer.

window.onload = function () { 
    var licenseUrl = "./Leadtools/LEADTOOLS.lic.txt"; 
    var developerKey = "ADD THE CONTENTS OF YOUR LEADTOOLS.lic.key.txt FILE"; 
    lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
      // Check the status of the license  
      if (setLicenseResult.result) { 
        console.log("LEADTOOLS client license set successfully"); 
 
      let ImageViewerDiv = document.getElementById("imageViewerDiv"); 
      ImageViewerDiv.style = "height: 350px; width: 350px;"; 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
      } else { 
        var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
        console.log(msg); 
        alert(msg); 
      } 
    }); 
  } 

Add the Load Image and Save Image Code

Open src\App.js file and modify the HTML with the below code:

import React from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
 
function App() { 
   
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        			<div class="tutorial-image"><img src={logo} className="App-logo" alt="logo" /></div> 
        <p> 
          Loading and Saving an Image example 
        </p> 
 
        <p>Image Viewer Below</p> 
         
        <input type="file" id="file-input" accept=".jpg,.jpeg,.png"></input> 
        <button id="addToViewer">Add Image To Viewer</button> 
        <a id="download" download="new-image-name.jpg"> save image </a> 
         
        <div id="imageViewerDiv"></div>        
         
      </header> 
    </div> 
  ); 
} 
 
export default App; 

In ltlogic.js file, add the following code after the ImageViewer initialization code:

var fileList = document.getElementById("file-input"); 
 
var download = document.getElementById("download"); 
     
var btn = document.getElementById("addToViewer"); 
btn.onclick = (function () { 
    //create our iterator 
    var i = 0; 
 
    //initially set our target to the first child of the uploaded files, then iterate it so 
    //subsequent images can be loaded in. 
    var files = fileList.files[i]; 
    var newUrl = window.URL.createObjectURL(files); 
    imageViewer.imageUrl = newUrl; 
    download.style = ("display: block;"); 
    download.href = newUrl; 
    i++; 
}); 

Run the project

Open the command line console, then cd into the root of the React project. From there, run yarn start.

This will build the React application, and the ImageViewer will now be loaded into the browser.

To load a new RasterImage into the ImageViewer, click Choose File and choose an image. Then press Add Image to Viewer to display the image. To export the image click save image and the image will begin to download.

Wrap-up

This tutorial showed how to load, display, and save images. In addition, it showed how to use the ImageViewer object.

See Also

• LEADTOOLS ImageViewer Documentation
• LEADTOOLS SDK Download Link
• YARN
• Node