JS прочитать изображение и показать

Question

JS прочитать изображение и показать

0

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>

Crackeraki 17 окт. 2013, в 20:35

Источник

0

Эта статья может помочь вам codewithlogic.wordpress.com/2013/09/01/…
Arpit 17 окт. 2013, в 18:21
0

stackoverflow.com/questions/9815625/… ответ на этот пост несколько сложнее.
Crackeraki 21 окт. 2013, в 07:13

Теги:

javascript

html

readfile

2 ответа

Ещё вопросы

Эта статья может помочь вам codewithlogic.wordpress.com/2013/09/01/…
stackoverflow.com/questions/9815625/… ответ на этот пост несколько сложнее.

ramachandrareddy reddam · Answer 1 · 2018-12-18T04-55-00.000Z

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

vishnu · Answer 2 · 2017-04-07T08-03-00.000Z

//Логика в 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>