JS read image and show

Question

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; i<2 ; i++){
    f = files[i]
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();
    reader.onload = (function(theFile){
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="',escape(theFile.name), '"/>'].join('');
        document.getElementById('pic'+i).insertBefore(span, null);
      };
    })(f,i);
    reader.readAsDataURL(f);
  }
}

I have this script from HERE, EXAMPLE 3 and i am trying to put every file in different place.

<tr><td colspan="2"><input type="file" id="inputFilesID" multiple ></td></tr>
<tr><td>Front</td><td><output id="pic0" /></td></tr>
<tr><td>Back</td><td><output id="pic1" /></td></tr>

For example, if that is mine html, why if i put 2 images my script trying to put everything at:

<tr><td>Bottom</td><td><output id="pic2" /></td></tr>

This article may help you http://codewithlogic.wordpress.com/2013/09/01/creating-a-file-uploader-using-javascript-and-html-5/ — Arpit, Oct 17 '13 at 18:21
http://stackoverflow.com/questions/9815625/reading-multiple-files-use-html5-filereader this post have the answer a bit more complicated. — Crackeraki, Oct 21 '13 at 07:13

score 1 · Answer 1 · answered Apr 07 '17 at 11:01

//Logic in Scripts.js

var canvas = document.getElementById('our-canvas'),
    context = canvas.getContext('2d');
    uploadedFile = document.getElementById('uploaded-file');
window.addEventListener('DOMContentLoaded',initImageLoader) ;

function initImageLoader(){
    uploadedFile.addEventListener('change',handleManualUploadedFiles);
    function handleManualUploadedFiles(ev){
        var file = ev.target.files[0];
        handleFile(file);

    }   
}
function handleFile(file){
    var ImageType = /image.*/;

    if(file.type.match(ImageType)){

        var reader = new FileReader();      

        reader.onloadend = function(event){
            var tempImageStore = new Image();
            tempImageStore.onload = function(ev){
                canvas.height = ev.target.height;
                canvas.width = ev.target.width;         
                context.drawImage(ev.target,0,0);
            }   
            tempImageStore.src = event.target.result;
        }
        reader.readAsDataURL(file);
    }   
}

//Showing in HTML

 <b>our image canvas </b>
  <input type="file" id="uploaded-file" />      
  <canvas id= "our-canvas" class="image-container"> </canvas>
  <script src="scripts.js" > </script>

reader.onload not reader.onloadend – Codeparl Oct 19 '22 at 16:56 — Codeparl, Oct 19 '22 at 16:56

score 0 · Answer 2 · answered Dec 18 '18 at 07:06

use npm jimp 
============================
Jimp.read('./path/to/image.jpg')
  .then(image => {
     console.log(image.bitmap)//having the image buffer data,width,height ...etc
    // Do stuff with the image.
  })
  .catch(err => {
    // Handle an exception.
  });

JS read image and show

2 Answers2