JS读取图像并显示答案

【问题标题】：JS read image and showJS读取图像并显示
【发布时间】：2013-10-26 09:14:54
【问题描述】：

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

我有这个来自HERE, EXAMPLE 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>

【问题讨论】：

这篇文章可能对你有帮助codewithlogic.wordpress.com/2013/09/01/…
stackoverflow.com/questions/9815625/… 这个帖子的答案有点复杂。

标签： javascript html readfile

【解决方案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>

【讨论】：

【解决方案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.
  });

【讨论】：