로컬 이미지를 잡고 표시하기위한 가장 간단한, 가장 가벼운 FileReader API 구현?

Question

로컬 이미지를 가져 와서 웹 페이지에 표시하기 위해 FileReader API를 머리에 쓰려고합니다.

나는 MDN의 페이지 모음 (여기에서 시작 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader)과 Treehouse를 언급했지만 초기에는 많은 복잡성이 있었고 제 기능을 가볍고 여유롭고 무료로 유지하려고합니다. 내가 할 수있는 것처럼 외딴 곳에서.

기본적으로 이없는 간단한 스크립트를 배포하고 싶습니다.이 너무 간단합니다.

var body = document.getElementsByTagName('body')[0]; 
 
var fileInput = document.querySelector('input[type=file]'); 
 

 
function getLocalImage() { 
 
    var image = document.createElement('img'); 
 

 
    var reader = new FileReader(); 
 

 
    var imageFile = fileInput.files[0]; 
 
    reader.readAsDataURL(imageFile); 
 

 
    reader.onload = function(e) { 
 
     image.src = reader.result; 
 
    } 
 

 
    body.appendChild(image); 
 
} 
 

 
fileInput.addEventListener('change',getLocalImage,false);

<input type="file" />

내 질문에

은 간단합니다 :

1. 이 스크립트는 그것보다 어떤 간단 할 수 여기에
   내가 조립 한 getLocalImage() 기능입니다? (나는 회의적이지만 나는 알고 싶어한다.)
2. 더 구체적으로이 스크립트는 도 간단합니까? 모범 사례를 생략 했습니까? (예를 들어, 나는 또한 웹 페이지를 설정 한 후 로컬 이미지의 크기를 받고해야합니까?) 이미지 만 할 수 있도록

Answer 1

• 당신은, 파일 선택기에 대한 accept 속성을 정의 할 수 있습니다 선택 : 사용자가 파일을 집어 또는 취소 버튼을 사용하여 선택을 취소 한 경우 확인해야

  <input type="file" accept="image/*" />

• 콜백 change에서.

• URL.createObjectURL을 사용하면 선택한 파일에서 이미지 URL을 만들 수 있습니다.

그래서 여기에 두 가지 옵션, 샘플이 리팩토링하면, 일부 성능 측정과의 FileReader와 된 ObjectURL에 대한 비교를 확인합니다.

function localImageSelected(event) { 
    var files = event.target.files; 
    if (files.length === 0) { 
     return; 
    } 
    var file = files[0]; 

    getImageSrcFromFile(file, function(src){ 
     var image = document.createElement('img'); 
     var now = performance.now(); 
     image.src = src; 
     image.onload = function(){ 
      console.log('Image loaded in:', performance.now() - now); 
     }; 
     document.body.appendChild(image); 
    });  
} 

function getImageSrcFromFile (file, cb) { 
    var now = performance.now(); 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     console.log('The url created in:', performance.now() - now); 
     cb(reader.result); 
    }; 
    reader.readAsDataURL(file); 
} 

document 
    .querySelector('input[type=file]') 
    .addEventListener('change', localImageSelected, false); 

그리고 된 ObjectURL와

:

function localImageSelected(event) { 
    var files = event.target.files; 
    if (files.length === 0) { 
     return; 
    } 
    var file = files[0]; 

    var image = document.createElement('img'); 
    var url = getImageSrcFromFile(file); 
    var now = performance.now(); 
    image.src = url; 
    image.onload = function(){ 
     console.log('Image loaded in:', performance.now() - now); 

     //I do it here, but note that the url is not more usable. 
     // Or you can remove this line, then extra KBs are in memory until the page reload, 
     // usually it is not critical 
     URL.revokeObjectURL(url); 
    }; 
    document.body.appendChild(image); 
} 

function getImageSrcFromFile (file) { 
    var now = performance.now(); 
    var url = URL.createObjectURL(file); 
    console.log('The url created in:', performance.now() - now); 
    return url; 
} 

document 
    .querySelector('input[type=file]') 
    .addEventListener('change', localImageSelected, false); 

가 ~ 빠르고 2 배 더 적은 메모리를 소모 나는이의 된 ObjectURL을 선호하지만 다음로드 된 이미지로 수동으로 URL을 취소 주목을 지불해야 페이지가 다시로드 될 때까지 메모리에 남아 있습니다. datareader의 base64 문자열은 더 이상 필요하지 않을 때 가비지 컬렉터에 의해 정리됩니다.

더 나은 비교는 여기에서 찾을 수 있습니다. FileReader vs. window.URL.createObjectURL