blob.js (1562B)
1 function init() { 2 function end() { 3 document.documentElement.className = ''; 4 } 5 6 function next() { 7 compressAndDisplay(original, end); 8 } 9 10 var original = getImageFromDataUrl(sample); 11 setImgLoadListener(original, next); 12 } 13 14 function compressAndDisplay(image, next) { 15 var canvas = document.createElement('canvas'); 16 canvas.width = image.naturalWidth; 17 canvas.height = image.naturalHeight; 18 var ctx = canvas.getContext('2d'); 19 ctx.drawImage(image, 0, 0); 20 21 function gotBlob(blob) { 22 var img = getImageFromBlob(blob); 23 setImgLoadListener(img, next); 24 document.body.appendChild(img); 25 } 26 27 // I want to test passing 'undefined' as quality as well 28 if ('quality' in window) { 29 canvas.toBlob(gotBlob, 'image/jpeg', quality); 30 } else { 31 canvas.toBlob(gotBlob, 'image/jpeg'); 32 } 33 } 34 35 function setImgLoadListener(img, func) { 36 if (img.complete) { 37 func.call(img, { target: img}); 38 } else { 39 img.addEventListener('load', func); 40 } 41 } 42 43 function naturalDimensionsHandler(e) { 44 var img = e.target; 45 img.width = img.naturalWidth; 46 img.height = img.naturalHeight; 47 } 48 49 function getImageFromBlob(blob) { 50 var img = document.createElement('img'); 51 img.src = window.URL.createObjectURL(blob); 52 setImgLoadListener(img, naturalDimensionsHandler); 53 setImgLoadListener(img, function(e) { 54 window.URL.revokeObjectURL(e.target.src); 55 }); 56 57 return img; 58 } 59 60 function getImageFromDataUrl(url) { 61 var img = document.createElement('img'); 62 img.src = url; 63 setImgLoadListener(img, naturalDimensionsHandler); 64 65 return img; 66 } 67 68 init();