javascript - Previev image: Blob or FileReader? -


i need display choosed image before sending server. need width , height of image.

blob vs filereader. i've done research, want make sure have missed nothing important , use best way.

a blob object represents file-like object of immutable, raw data. blobs represent data isn't in javascript-native format. file interface based on blob, inheriting blob functionality , expanding support files on user's system.

the filereader object lets web applications asynchronously read contents of files (or raw data buffers) stored on user's computer, using file or blob objects specify file or data read.

console.time("blob"); var img = new image; img.onload = function() {     $("img").attr("src", this.src);     console.timeend("blob");     dosomething(this.width, this.height);     window.url.revokeobjecturl(img.src); } img.src = window.url.createobjecturl(file);   console.time("filereader"); var reader = new filereader(); reader.onload = function(e) {     var img = new image;     img.src = e.target.result;     img.onload = function()     {         $("img").attr("src", this.src);         console.timeend("filereader");         dosomething(this.width, this.height);     }     reader.readasdataurl(file); } 

results (test image 14850x8000, 6.41 mb):

            firefox 39  chrome 44   opera 30    internet explorer 11 blob        249ms       47ms        65ms        81ms filereader  2517ms      3693ms      2191ms      2679ms 
  • both load image asynchronously.
  • both kill browser seconds (web workers ftw).
  • only filereader returns content directly (which don't need now).
  • although test showed blob 25x faster filereader, in fact, it's ~1.5/2x faster (from time choosing file time see loaded image ~4s blob, ~6s filereader in firefox).
  • in firefox, if display images, , else 5 minutes, return site, both images black.
  • both supported in major browsers (i don't need readasbinarystring).


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -