cacheimage.js

!function(e){e.fn.cacheImages=function(a){const c=e.extend({},e.fn.cacheImages.defaults,a);return"function"==typeof c.start&&c.start(this),this.each(function(a,t){const o=e(t),n="IMG"===o.prop("tagName")?"src":"css";let s=o.prop("src")||o.css("background-image").replace(/"/g,"").replace(/url\(|\)$/gi,"");if(null!==c.url&&(s=c.url,"src"===n?o.prop("src",""):o.css("background-image","url()")),void 0===s)return console.error("FV.cacheImage: Error - no URI to load"),c.fail.call(t),c.always.call(t),!0;const l=c.storagePrefix+":"+s;e.fn.cacheImages.get(o,l,function(a,r){if(!c.forceSave&&r&&e.fn.cacheImages.testOutput(r,!0))this.data("cachedImageSrc",s),"src"===n?this.prop("src",r):this.css("background-image","url("+r+")"),console.log("FV.cacheImage: Already Encoded"),c.done.call(this,r),c.always.call(this);else{"src"===n?this.prop("src",""):this.css("background-image","url()"),console.log("FV.cacheImage: Caching in Progress - "+s),c.fail.call(this),c.always.call(this);const a=s.match(/\.(jpg|jpeg|png|gif)$/i);if(a&&a.length){const r="jpg"===a[1].toLowerCase()?"jpeg":a[1].toLowerCase();if(c.encodeOnCanvas&&"gif"!==r)console.log("FV.cacheImage: Preparing to Cache : canvas - "+s),o.one("load",function(){const a=e.fn.cacheImages.base64EncodeCanvas(t);e.fn.cacheImages.set(t,l,a),e.fn.cacheImages.testOutput(a,!0)?("src"===n?o.prop("src",a):o.css("background-image","url("+a+")"),o.is(".cacheImagesRemove")&&o.remove(),c.done.call(t,a)):c.fail.call(t),c.always.call(t)});else{console.log("FV.cacheImage: Preparing to Cache : XHR ArrayBuffer - "+s);const a=new XMLHttpRequest;a.open("GET",s,!0),a.responseType="arraybuffer",a.onload=function(){let a="";200===this.status&&(a="data:image/"+r+";base64,"+e.fn.cacheImages.base64EncodeResponse(this.response)),e.fn.cacheImages.set(t,l,a,function(a,s){e.fn.cacheImages.testOutput(s,!0)?("src"===n?o.prop("src",s):o.css("background-image","url("+s+")"),o.is(".cacheImagesRemove")&&o.remove(),c.done.call(t,s)):void 0!==c.defaultSrc?(c.url=c.defaultImage,e.fn.cacheImages(c),c.fail.call(t)):("src"===n?o.prop("src",c.defaultImage):o.css("background-image","url("+c.defaultImage+")"),c.fail.call(t)),c.always.call(t)})},a.send()}}else c.fail.call(this),c.always.call(this)}})})},e.fn.cacheImages.defaults={always:function(){},debug:!1,defaultImage:"data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAEAsLCwwLEAwMEBcPDQ8XGxQQEBQbHxcXFxcXHx4XGhoaGhceHiMlJyUjHi8vMzMvL0BAQEBAQEBAQEBAQEBAQAERDw8RExEVEhIVFBEUERQaFBYWFBomGhocGhomMCMeHh4eIzArLicnJy4rNTUwMDU1QEA/QEBAQEBAQEBAQEBA/8AAEQgAZABkAwEiAAIRAQMRAf/EAEsAAQEAAAAAAAAAAAAAAAAAAAAFAQEAAAAAAAAAAAAAAAAAAAAAEAEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA",done:function(e){},encodeOnCanvas:!1,fail:function(){},forceSave:!1,ready:!0,start:function(){},storageDB:"localStorage",storagePrefix:"cached",url:null},e.fn.cacheImages.storageAvailable=function(a,c,t,o){"object"==typeof localStorage?o.call(a,c,t):e.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Error - localStorage not available")},e.fn.cacheImages.set=function(e,a,c,t){localStorage[a]=c,"function"==typeof t&&t.call(e,a,c)},e.fn.cacheImages.get=function(e,a,c){let t=null;void 0!==localStorage[a]&&(t=localStorage[a]),"function"==typeof c&&c.call(e,a,t)},e.fn.cacheImages.base64EncodeCanvas=function(a){try{const c=document.createElement("canvas");c.width=a.width,c.height=a.height,c.getContext("2d").drawImage(a,0,0);const t=a.src.match(/\.(jpg|jpeg|png)$/i);if(!t||!t.length)throw"Invalid image type for canvas encoder: "+a.src;const o="jpg"===t[1].toLowerCase()?"jpeg":t[1].toLowerCase();return c.toDataURL("image/"+o)}catch(a){return e.fn.cacheImages.defaults.debug&&console&&console.log("FV.cacheImage.base64EncodeCanvas: Error while Encoding",a),"error"}},e.fn.cacheImages.base64EncodeResponse=function(e){const a=new Uint8Array(e);let c="";const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";for(let e=0;e<a.length;e+=3){const o=a[e]<<16|a[e+1]<<8|a[e+2];c+=t[o>>18&63]+t[o>>12&63]+t[o>>6&63]+t[63&o]}return c},e.fn.cacheImages.fetchURL=function(a,c){e("body").append(e('<img style="display: none;" />').addClass("cacheImagesRemove").cacheImages({url:a,done:function(e){"function"==typeof c&&c.call(this,a,e)}}))},e.fn.cacheImages.Output=function(a,c,t,o){void 0===t&&(t=e.fn.cacheImages.defaults.storagePrefix),void 0===o&&(o=!1);const n=t+":"+a,s=window.localStorage.getItem(n);null!==s?e.fn.cacheImages.testOutput(s,!0)?c.call(this,s):e.fn.cacheImages.testOutput(e.fn.cacheImages.defaults.defaultImage,!0)?e.fn.cacheImages.fetchURL(e.fn.cacheImages.defaults.defaultImage,function(e,a){c.call(this,a)}):console.error("FV.cacheImage.Output: Failed to load default image"):o?e.fn.cacheImages.fetchURL(a,function(e){c.call(this,e)}):console.error("FV.cacheImage.Output: Failed to load image "+a)},e.fn.cacheImages.drop=function(a,c,t){const o=[];void 0===t&&(t=e.fn.cacheImages.defaults.storagePrefix);for(let e=0;e<window.localStorage.length;e++){const a=window.localStorage.key(e);a.substr(0,t.length+1)===t+":"&&o.push(a)}if(0===o.length)console.log("FV.cacheImage.drop: No Images to Drop"),"function"==typeof c&&c.call(this,a);else{for(let e=0;e<o.length;e++)console.log("FV.cacheImage.drop: Dropping localStorage Key:",o[e]),window.localStorage.removeItem(o[e]);console.log("FV.cacheImage.drop: Dropped "+o.length+" images from storage"),"function"==typeof c&&c.call(this,a)}},e.fn.cacheImages.testOutput=function(e,a){if(0===e.length||"pending"===e||"error"===e||/^http/.test(e))return!1;if(a){if(!/^data:image/.test(e))return console.error("FV.cacheImage.textOutput: Er1 - Missing data image prefix"),!1;if(!/;base64,/.test(e))return console.error("FV.cacheImage.textOutput: Er2 - Missing ;base64, prefix"),!1;e=e.substr(e.indexOf(";base64,")+8)}if(0===e.length)return console.error("FV.cacheImage.textOutput: Er3 - No encoded value"),!1;try{return btoa(atob(e))===e}catch(e){return console.error("FV.cacheImage.textOutput: Er4 - Invalid base64 value",e),!1}}}(jQuery);