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 fasterfilereader
, in fact, it's ~1.5/2x faster (from time choosing file time see loaded image ~4sblob
, ~6sfilereader
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
Post a Comment