javascript - JS读取图像并显示

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);
  }
}

我有这个脚本，示例 3，我试图将每个文件放在不同的位置。

<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>

例如，如果那是我的 html，为什么如果我放 2 张图片我的脚本试图把所有东西都放在：

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

Answer 1

//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);
    }   
}

//在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>

Answer 2

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.
  });