vanilla-image-cropper/docs/imagecrop.min.js

A lightweight javascript imagecropper

var ImageCropper=function(){"use strict";function e(e){var t=!(arguments.length<=1||void 0===arguments[1])&&arguments[1],n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],i=arguments.length<=3||void 0===arguments[3]?null:arguments[3],o=!(arguments.length<=4||void 0===arguments[4])&&arguments[4],r=o?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);return i&&i.appendChild(r),t&&(Array.isArray(t)?t:[t]).forEach(function(e){return r.classList.add(e)}),Object.keys(n||{}).forEach(function(e){return r.setAttribute(e,n[e])}),r}function t(e){return"HTMLElement"in window?!!(e&&e instanceof HTMLElement):!(!e||"object"!==("undefined"==typeof e?"undefined":u(e))||1!==e.nodeType||!e.nodeName)}function n(e,t){var n=e.clientX-t.left,i=e.clientY-t.top;return{x:n<0?0:n>t.width?t.width:n,y:i<0?0:i>t.height?t.height:i}}function i(e){return Object.keys(e).reduce(function(t,n){return t.push(e[n]),t},[])}function o(e,t){return!((Array.isArray(e)?e:i(e)).indexOf(t)===-1)}function r(e,t){var n=~~(.5*(t.x2-t.x)),i=~~(.5*(t.y2-t.y));e.x-n<0&&(e.x=n),e.x+n>t.w&&(e.x=t.w-n),e.y-i<0&&(e.y=i),e.y+i>t.h&&(e.y=t.h-i),t.x=e.x-n,t.x2=e.x+n,t.y=e.y-i,t.y2=e.y+i}function s(){if(g.$$state===h.LOADING){var e=l.$$source,t=e.naturalWidth,n=e.naturalHeight,i=g.options,o=i.max_width,r=i.max_height;if(t>o&&(n=~~(o*n/t),t=o),n>r&&(t=~~(r*t/n),n=r),g.meta.ratio={w:Math.round(e.naturalWidth/t*100)/100,h:Math.round(e.naturalHeight/n*100)/100},g.meta.dimensions.w=e.width=t,g.meta.dimensions.h=e.height=n,g.$$state=h.READY,g.options.fixed_size){var s=g.options,u=s.min_crop_width,c=s.min_crop_height,d=.5*(u>c?u:c),m=.5*t,p=.5*n;g.meta.dimensions.x=m-d,g.meta.dimensions.x2=m+d,g.meta.dimensions.y=p-d,g.meta.dimensions.y2=p+d}else g.meta.dimensions.x2=g.meta.dimensions.w=t,g.meta.dimensions.y2=g.meta.dimensions.h=n;a(),g.options.create_cb({w:t,h:n})}}function a(e){if(g.$$state===h.READY){e&&e.stopPropagation();var t=g.meta.dimensions;t.x<0&&(t.x=0),t.y<0&&(t.y=0),t.x2>t.w&&(t.x2=t.w),t.y2>t.h&&(t.y2=t.h),x.update(t,g.options),w.update(t,g.options),g.options.update_cb(t)}}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},d=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),m=function(){function t(n){var i=this;c(this,t),this.$$view=e("div",["imgc-content"],{},n.$$parent),this.$$source=e("img",null,{},this.$$view),this.$$source.addEventListener("load",function(){i.$$source.dispatchEvent(new CustomEvent("source:fetched"))})}return d(t,[{key:"source",value:function(e){this.$$source.src=e}}]),t}(),h={OFFLINE:0,LOADING:1,READY:2},p={SQUARE:"square",CIRCULAR:"circular"},f=Object.freeze([function(e,t,n){var i=t.x;f[7](e,t,n),n.fixed_size?t.y+t.x-i<0?(t.x=i-t.y,t.y=0):t.y+=t.x-i:f[4](e,t,n)},function(e,t,n){var i=t.x2;f[5](e,t,n),n.fixed_size?t.y-t.x2+i<0?(t.x2=i+t.y,t.y=0):t.y-=t.x2-i:f[4](e,t,n)},function(e,t,n){var i=t.x2;f[5](e,t,n),n.fixed_size?t.y2+t.x2-i>t.h?(t.x2=i+(t.h-t.y2),t.y2=t.h):t.y2+=t.x2-i:f[6](e,t,n)},function(e,t,n){var i=t.x;f[7](e,t,n),n.fixed_size?t.y2+(i-t.x)>t.h?(t.x=i-(t.h-t.y2),t.y2=t.h):t.y2-=t.x-i:f[6](e,t,n)},function(e,t,n){return t.y=t.y2-e.y<n.min_crop_height?t.y2-n.min_crop_height:e.y},function(e,t,n){return t.x2=e.x-t.x<n.min_crop_width?t.x+n.min_crop_width:e.x},function(e,t,n){return t.y2=e.y-t.y<n.min_crop_height?t.y+n.min_crop_height:e.y},function(e,t,n){return t.x=t.x2-e.x<n.min_crop_width?t.x2-n.min_crop_width:e.x}]),y=function t(i,o,r){function s(e){e.stopPropagation(),document.addEventListener("mouseup",a),document.addEventListener("mousemove",u)}function a(e){e.stopPropagation(),document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",u)}function u(e){e.stopPropagation(),f[o](n(e,r.$$parent.getBoundingClientRect()),r.meta.dimensions,r.options),i.dispatchEvent(new CustomEvent("source:dimensions"))}c(this,t),this.$$view=e("span",["imgc-handles-el","imgc-handles-el-"+~~(o/4)+"-"+o%4],{},i),this.$$view.addEventListener("mousedown",s)},v=function(){function t(i){function s(e){document.addEventListener("mousemove",a),document.addEventListener("mouseup",u),d(e)}function a(e){d(e)}function u(){document.removeEventListener("mouseup",u),document.removeEventListener("mousemove",a)}function d(e){r(n(e,i.$$parent.getBoundingClientRect()),i.meta.dimensions),i.$$parent.dispatchEvent(new CustomEvent("source:dimensions"))}if(c(this,t),!o(p,i.options.mode))throw new TypeError("Mode "+i.options.mode+" doesnt exist");this.$$view=e("div",["imgc-handles","imgc-handles-"+i.options.mode],{},i.$$parent);for(var m=0;m<(i.options.fixed_size?4:8);m++)new y(this.$$view,m,i);this.$$view.addEventListener("mousedown",s)}return d(t,[{key:"update",value:function(e){var t=e.x,n=e.x2,i=e.y,o=e.y2,r=e.w,s=e.h;this.$$view.style.top=i+"px",this.$$view.style.left=t+"px",this.$$view.style.right=~~(r-n)+"px",this.$$view.style.bottom=~~(s-o)+"px"}}]),t}(),$=function(){function t(n){c(this,t),this.$$view=e("svg",["imgc-overlay"],{},n.$$parent,!0),this.$$path=e("path",null,{"fill-rule":"evenodd"},this.$$view,!0)}return d(t,[{key:"update",value:function(e,t){var n=e.x,i=e.x2,o=e.y,r=e.y2,s=e.w,a=e.h,u=t.mode,c=.5*(i-n),d=.5*(r-o),m=i-n,h=r-o;this.$$path.setAttribute("d","M 0 0 v "+a+" h "+s+" v "+-a+" H-0zM"+(u===p.SQUARE?n+" "+o+" h "+m+" v "+h+" h "+-m+" V "+-h+" z":n+.5*m+" "+(o+.5*h)+" m "+-c+",0 a "+c+", "+d+" 0 1,0 "+m+",0 a "+c+", "+d+" 0 1,0 "+-m+" ,0 z"))}}]),t}(),l=null,x=null,w=null,g=Object.seal({$$parent:null,$$state:h.OFFLINE,meta:{dimensions:{x:0,x2:0,y:0,y2:0,w:0,h:0},ratio:{w:1,h:1}},options:{update_cb:function(){},create_cb:function(){},destroy_cb:function(){},min_crop_width:100,min_crop_height:100,max_width:500,max_height:500,fixed_size:!1,mode:p.SQUARE}}),_=function(){function n(e,i){var o=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];if(c(this,n),i&&e){Object.keys(o||{}).forEach(function(e){return g.options[e]=o[e]});var r=document.querySelector(e);if(!t(r))throw new TypeError("Does the parent exist?");g.$$parent=r,g.$$parent.classList.add("imgc"),g.$$parent.addEventListener("DOMNodeRemovedFromDocument",this.destroy),g.$$parent.addEventListener("source:fetched",s,!0),g.$$parent.addEventListener("source:dimensions",a,!0),l=new m(g),x=new $(g),w=new v(g),this.setImage(i)}}return d(n,[{key:"setImage",value:function(e){g.$$state=h.LOADING,l.source(e)}},{key:"destroy",value:function(){if(g.$$state=h.OFFLINE,t(g.$$parent)){for(;g.$$parent.firstChild;)g.$$parent.removeChild(g.$$parent.firstChild);g.$$parent.classList.remove("imgc")}g.options.destroy_cb()}},{key:"crop",value:function(){var t=arguments.length<=0||void 0===arguments[0]?"image/jpeg":arguments[0],n=arguments.length<=1||void 0===arguments[1]?1:arguments[1];t=o(["image/jpeg","image/png"],t)?"image/jpeg":t,n=n<0||n>1?1:n;var i=g.meta.dimensions,r=i.x,s=i.y,a=i.x2,u=i.y2,c=g.meta.ratio,d=c.w,m=c.h,h=a-r,p=u-s,f=e("canvas",null,{width:h,height:p});return f.getContext("2d").drawImage(l.$$source,d*r,m*s,d*h,m*p,0,0,h,p),f.toDataURL(t,n)}}]),n}();return _}();