vue-image-upload-resize/dist/vue-image-upload-resize.min.js

A simple Vue.js component for client-side image upload with resizing

/*!
 * vue-image-upload-resize v1.1.5
 * Based on ImageUploader (c) Ross Turner (https://github.com/rossturner/HTML5-ImageUploader)
 * Adapted by (c) 2018 Svale Fossåskaret
 * Released under the MIT License.
 */

 if(typeof EXIF === 'undefined'){ var EXIF; } if(typeof dataURLtoBlob == 'undefined'){ var dataURLtoBlob; }

if(void 0===EXIF)var EXIF;if(void 0===dataURLtoBlob)var dataURLtoBlob;!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("exif-js"),require("blueimp-canvas-to-blob")):"function"==typeof define&&define.amd?define(["exports","exif-js","blueimp-canvas-to-blob"],t):t(e.VueImageUploadResize=e.VueImageUploadResize||{},e.EXIF,e.dataURLtoBlob)}(this,function(e,t,a){"use strict";function i(e){e.component("image-uploader",o)}t="default"in t?t.default:t,a="default"in a?a.default:a;var o={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("img",{directives:[{name:"show",rawName:"v-show",value:e.imagePreview,expression:"imagePreview"}],staticClass:"img-preview",attrs:{src:e.imagePreview,width:"100"}}),e._v(" "),a("input",{class:e.className,attrs:{id:e.id,type:"file",accept:"image/*",capture:"camera"},on:{change:e.uploadFile}}),e._t("upload-label")],2)},staticRenderFns:[],name:"image-uploader",props:{id:{type:String,default:"fileInput"},maxWidth:{type:Number,default:1024},maxHeight:{type:Number,default:1024},maxSize:{type:Number,default:null},quality:{type:Number,default:1},scaleRatio:{type:Number,default:null},autoRotate:{type:Boolean,default:!1},preview:{type:Boolean,default:!0},outputFormat:{type:String,default:"string"},className:{type:[String,Array],default:"fileinput"},debug:{type:Number,default:0}},data:function(){return{imagePreview:null}},methods:{uploadFile:function(e){var t=e.target.files&&e.target.files.length?e.target.files[0]:null;t&&(this.emitLoad(),this.handleFile(t,this.emitComplete))},emitEvent:function(e){this.debug>1&&(console.log("emitEvent() is called with output:"),console.log(e)),this.$emit("input",e),this.$emit("change",e)},emitLoad:function(){this.$emit("onUpload")},emitComplete:function(){this.$emit("onComplete")},handleFile:function(e,a){this.debug>1&&(console.log("handleFile() is called with file:"),console.log(e)),this.currentFile=e;var i=this,o=document.createElement("img"),l=new window.FileReader;l.onload=function(e){i.debug>1&&console.log("reader.onload() is triggered"),o.src=e.target.result,o.onload=function(){i.debug>1&&console.log("img.onload() is triggered"),i.autoRotate?void 0===t?(console.warn("Missing EXIF library! exif-js.js must be loaded to use autoRotate"),console.warn("Continuing without rotation"),i.scaleImage(o,a)):(i.debug&&console.log("ImageUploader: detecting image orientation..."),"function"==typeof t.getData&&"function"==typeof t.getTag?t.getData(o,function(){var e=t.getTag(this,"Orientation");i.debug&&console.log("ImageUploader: image orientation from EXIF tag = "+e),i.scaleImage(o,a,e)}):(console.error("ImageUploader: can't read EXIF data, the Exif.js library not found"),i.scaleImage(o,a))):(i.debug&&console.log("No autoRotate"),i.scaleImage(o,a))}},l.readAsDataURL(e)},scaleImage:function(e,t,a){var i=this;this.debug>1&&console.log("scaleImage() is called");var o=document.createElement("canvas");o.width=e.width,o.height=e.height;var l=o.getContext("2d");l.save();var n=o.width,r=o.style.width,s=o.height,d=o.style.height;if(void 0===a&&(a=1),a)switch(a>4&&(o.width=s,o.style.width=d,o.height=n,o.style.height=r),a){case 2:l.translate(n,0),l.scale(-1,1);break;case 3:l.translate(n,s),l.rotate(Math.PI);break;case 4:l.translate(0,s),l.scale(1,-1);break;case 5:l.rotate(.5*Math.PI),l.scale(1,-1);break;case 6:l.rotate(.5*Math.PI),l.translate(0,-s);break;case 7:l.rotate(.5*Math.PI),l.translate(n,-s),l.scale(-1,1);break;case 8:l.rotate(-.5*Math.PI),l.translate(-n,0)}l.drawImage(e,0,0),l.restore();var h=o.width/o.height,u=Math.min(this.maxWidth,h*this.maxHeight);if(this.maxSize>0&&this.maxSize<o.width*o.height/1e6){var g=Math.floor(1e3*Math.sqrt(this.maxSize*h));u=u>0?Math.min(u,g):g}for(this.scaleRatio&&(u=Math.min(u,Math.floor(this.scaleRatio*o.width))),this.debug&&(console.log("ImageUploader: original image size = "+o.width+" X "+o.height),console.log("ImageUploader: scaled image size = "+u+" X "+Math.floor(u/h))),u<=0&&(u=1,console.warning("ImageUploader: image size is too small"));o.width>=2*u;)o=i.getHalfScaleCanvas(o);o.width>u&&(o=this.scaleCanvasWithAlgorithm(o,u));var c="image/jpeg"===this.currentFile.type?this.quality:1,m=o.toDataURL(this.currentFile.type,c);"function"==typeof this.onScale&&this.onScale(m),this.debug>1&&console.log("New ImageData is ready. Set Preview, emitEvent and trigger optional callback "),this.preview&&(this.imagePreview=m),this.emitEvent(this.formatOutput(m)),t()},scaleCanvasWithAlgorithm:function(e,t){var a=document.createElement("canvas"),i=t/e.width;a.width=e.width*i,a.height=e.height*i;var o=e.getContext("2d").getImageData(0,0,e.width,e.height),l=a.getContext("2d").createImageData(a.width,a.height);return this.applyBilinearInterpolation(o,l,i),a.getContext("2d").putImageData(l,0,0),a},applyBilinearInterpolation:function(e,t,a){function i(e,t,a,i,o,l){var n=1-o,r=1-l;return e*n*r+t*o*r+a*n*l+i*o*l}var o,l,n,r,s,d,h,u,g,c,m,f,p,w,v,b,I,y,F;for(o=0;o<t.height;++o)for(n=o/a,r=Math.floor(n),s=Math.ceil(n)>e.height-1?e.height-1:Math.ceil(n),l=0;l<t.width;++l)d=l/a,h=Math.floor(d),u=Math.ceil(d)>e.width-1?e.width-1:Math.ceil(d),g=4*(l+t.width*o),c=4*(h+e.width*r),m=4*(u+e.width*r),f=4*(h+e.width*s),p=4*(u+e.width*s),w=d-h,v=n-r,b=i(e.data[c],e.data[m],e.data[f],e.data[p],w,v),t.data[g]=b,I=i(e.data[c+1],e.data[m+1],e.data[f+1],e.data[p+1],w,v),t.data[g+1]=I,y=i(e.data[c+2],e.data[m+2],e.data[f+2],e.data[p+2],w,v),t.data[g+2]=y,F=i(e.data[c+3],e.data[m+3],e.data[f+3],e.data[p+3],w,v),t.data[g+3]=F},getHalfScaleCanvas:function(e){var t=document.createElement("canvas");return t.width=e.width/2,t.height=e.height/2,t.getContext("2d").drawImage(e,0,0,t.width,t.height),t},formatOutput:function(e){return this.debug&&console.log("ImageUploader: outputFormat: "+this.outputFormat),"blob"===this.outputFormat?void 0===a?(console.warn('Missing library! blueimp-canvas-to-blob.js must be loaded to output as "blob"'),console.warn("Falling back to default base64 dataUrl"),e):a(e):"verbose"===this.outputFormat?{dataUrl:e,name:this.currentFile.name,lastModified:this.currentFile.lastModified,lastModifiedDate:this.currentFile.lastModifiedDate}:e}},created:function(){this.debug&&console.log("Initialised ImageUploader")}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(i);e.default=i,e.ImageUploader=o,e.version="1.1.5",Object.defineProperty(e,"__esModule",{value:!0})});