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

A lightweight javascript imagecropper

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