Javascript JS读取图像并显示 功能手柄文件选择（evt）{ var files=evt.target.files； for（var i=0，f；i

//Scripts.js中的逻辑

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

//以HTML显示

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

我们的图像画布

这篇文章可能会帮助你在这篇文章中找到更复杂的答案。

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

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

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

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