dataurl.js (1255B)
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 var dataUrl; 22 // I want to test passing undefined as well 23 if ('quality' in window) { 24 dataUrl = canvas.toDataURL('image/jpeg', quality); 25 } else { 26 dataUrl = canvas.toDataURL('image/jpeg'); 27 } 28 29 var img = getImageFromDataUrl(dataUrl); 30 setImgLoadListener(img, next); 31 document.body.appendChild(img); 32 } 33 34 function setImgLoadListener(img, func) { 35 if (img.complete) { 36 func.call(img, { target: img}); 37 } else { 38 img.addEventListener('load', func); 39 } 40 } 41 42 function naturalDimensionsHandler(e) { 43 var img = e.target; 44 img.width = img.naturalWidth; 45 img.height = img.naturalHeight; 46 } 47 48 function getImageFromDataUrl(url) { 49 var img = document.createElement('img'); 50 img.src = url; 51 setImgLoadListener(img, naturalDimensionsHandler); 52 53 return img; 54 } 55 56 init();