Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

croppie

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

croppie - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

24

croppie.js

@@ -5,3 +5,3 @@ /*************************

* Foliotek
* Version: 2.1.0
* Version: 2.1.1
*************************/

@@ -223,3 +223,3 @@ (function (root, factory) {

function rotateCanvas(canvas, img, orientation) {
function drawCanvas(canvas, img, orientation) {
var width = img.width,

@@ -750,3 +750,3 @@ height = img.height,

_updateCenterPoint.call(self);
_updateOverlay.call(self);

@@ -802,3 +802,3 @@ }

ctx = canvas.getContext('2d'),
exif = self.options.enableExif,
exif = _hasExif.call(self),
customOrientation = self.options.enableOrientation && customOrientation;

@@ -812,9 +812,9 @@

getExifOrientation(img, function (orientation) {
rotateCanvas(canvas, img, parseInt(orientation));
drawCanvas(canvas, img, parseInt(orientation));
if (customOrientation) {
rotateCanvas(canvas, img, customOrientation);
drawCanvas(canvas, img, customOrientation);
}
});
} else if (customOrientation) {
rotateCanvas(canvas, img, customOrientation);
drawCanvas(canvas, img, customOrientation);
}

@@ -908,6 +908,5 @@ }

self.elements.img.exifdata = null;
_transferImageToCanvas.call(self, options.orientation);
_transferImageToCanvas.call(self, options.orientation || 1);
}
_updatePropertiesFromImage.call(self);
_updateCenterPoint.call(self);
_triggerUpdate.call(self);

@@ -994,3 +993,2 @@ if (cb) {

console.log(data);
prom = new Promise(function (resolve, reject) {

@@ -1031,3 +1029,3 @@ if (type === 'canvas') {

rotateCanvas(canvas, copy, ornt);
drawCanvas(canvas, copy, ornt);
_onZoom.call(self);

@@ -1046,4 +1044,4 @@ }

if (this.jQuery) {
var $ = this.jQuery;
if (window.jQuery) {
var $ = window.jQuery;
$.fn.croppie = function (opts) {

@@ -1050,0 +1048,0 @@ var ot = typeof opts;

@@ -1,1 +0,1 @@

!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(exports){function e(e){if(e in z)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=W.length;n--;)if(e=W[n]+t,e in z)return e}function t(e,t){e=e||{};for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},arguments.callee(e[n],t[n])):e[n]=t[n];return e}function n(e,t,n){var i;return function(){var o=this,r=arguments,a=function(){i=null,n||e.apply(o,r)},s=n&&!i;clearTimeout(i),i=setTimeout(a,t),s&&e.apply(o,r)}}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;t={},t[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function s(e,t){var n,i=t||new Image;return i.src===e?n=new Promise(function(e,t){e(i)}):(n=new Promise(function(t,n){"http"===e.substring(0,4).toLowerCase()&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){setTimeout(function(){t(i)},1)}}),i.src=e),i.style.opacity=0,n}function l(e,t){window.EXIF||t(0),EXIF.getData(e,function(){var e=EXIF.getTag(this,"Orientation");t(e)})}function u(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function c(){var e,t,n,i,a=this,s="croppie-container",l=a.options.viewport.type?"cr-vp-"+a.options.viewport.type:null;a.options.useCanvas=a.options.enableOrientation||h.call(a),a.data={},a.elements={},e=a.elements.boundary=document.createElement("div"),n=a.elements.viewport=document.createElement("div"),t=a.elements.img=document.createElement("img"),i=a.elements.overlay=document.createElement("div"),a.options.useCanvas?(a.elements.canvas=document.createElement("canvas"),a.elements.preview=a.elements.canvas):a.elements.preview=a.elements.img,r(e,"cr-boundary"),o(e,{width:a.options.boundary.width+"px",height:a.options.boundary.height+"px"}),r(n,"cr-viewport"),l&&r(n,l),o(n,{width:a.options.viewport.width+"px",height:a.options.viewport.height+"px"}),r(a.elements.preview,"cr-image"),r(i,"cr-overlay"),a.element.appendChild(e),e.appendChild(a.elements.preview),e.appendChild(n),e.appendChild(i),r(a.element,s),a.options.customClass&&r(a.element,a.options.customClass),g.call(this),a.options.enableZoom&&m.call(a)}function h(){return(this.options.enableExif||this.options.exif)&&window.EXIF}function p(e){this.options.enableZoom&&(this.elements.zoomer.value=X(e,4))}function m(){function e(){d.call(n,{value:parseFloat(o.value),origin:new D(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:N.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i,t.preventDefault(),p.call(n,o),e()}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.01",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function d(e){var t=this,n=e?e.transform:N.parse(t.elements.preview),i=e?e.viewportRect:t.elements.viewport.getBoundingClientRect(),r=e?e.origin:new D(t.elements.preview);if(t._currentZoom=e?e.value:t._currentZoom,n.scale=t._currentZoom,t.options.enforceBoundary){var a=f.call(t,i),s=a.translate,l=a.origin;n.x>=s.maxX&&(r.x=l.minX,n.x=s.maxX),n.x<=s.minX&&(r.x=l.maxX,n.x=s.minX),n.y>=s.maxY&&(r.y=l.minY,n.y=s.maxY),n.y<=s.minY&&(r.y=l.maxY,n.y=s.minY)}var u={};u[P]=n.toString(),u[S]=r.toString(),o(t.elements.preview,u),H.call(t),y.call(t)}function f(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.options.boundary.width/2,a=t.options.boundary.height/2,s=t.elements.preview.getBoundingClientRect(),l=s.width,u=s.height,c=i/2,h=o/2,p=-1*(c/n-r),m=p-(l*(1/n)-i*(1/n)),d=-1*(h/n-a),f=d-(u*(1/n)-o*(1/n)),v=1/n*c,g=l*(1/n)-v,w=1/n*h,y=u*(1/n)-w;return{translate:{maxX:p,minX:m,maxY:d,minY:f},origin:{maxX:g,minX:v,maxY:y,minY:w}}}function v(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=N.parse(e.elements.preview.style[P]),a=new D(e.elements.preview),s=i.top-n.top+i.height/2,l=i.left-n.left+i.width/2,u={},c={};u.y=s/t,u.x=l/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[S]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function g(){function e(e){if(e.preventDefault(),!c){if(c=!0,r=e.pageX,a=e.pageY,e.touches){var i=e.touches[0];r=i.pageX,a=i.pageY}transform=N.parse(u.elements.preview),window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[O]="none",l=u.elements.viewport.getBoundingClientRect()}}function t(e){e.preventDefault();var t=e.pageX,n=e.pageY;if(e.touches){var c=e.touches[0];t=c.pageX,n=c.pageY}var h=t-r,m=n-a,d=u.elements.preview.getBoundingClientRect(),f=transform.y+m,v=transform.x+h,g={};if("touchmove"==e.type&&e.touches.length>1){var y=e.touches[0],x=e.touches[1],b=Math.sqrt((y.pageX-x.pageX)*(y.pageX-x.pageX)+(y.pageY-x.pageY)*(y.pageY-x.pageY));s||(s=b/u._currentZoom);var C=b/s;return p.call(u,C),void i(u.elements.zoomer)}u.options.enforceBoundary?(l.top>d.top+m&&l.bottom<d.bottom+m&&(transform.y=f),l.left>d.left+h&&l.right<d.right+h&&(transform.x=v)):(transform.y=f,transform.x=v),g[P]=transform.toString(),o(u.elements.preview,g),w.call(u),a=n,r=t}function n(){c=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[O]="",v.call(u),y.call(u),s=0}var r,a,s,l,u=this,c=!1;u.elements.overlay.addEventListener("mousedown",e),u.elements.overlay.addEventListener("touchstart",e)}function w(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function y(){var e=this;x.call(e)&&e.options.update.call(e,e.get())}function x(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function b(){var e,t,n,r,a,s=this,l=0,u=1.5,c=1,h={},m=s.elements.preview,d=s.elements.zoomer,f=new N(0,0,c),v=new D,g=x.call(s);g&&!s.data.bound&&(s.data.bound=!0,h[P]=f.toString(),h[S]=v.toString(),h.opacity=1,o(m,h),e=m.getBoundingClientRect(),t=s.elements.viewport.getBoundingClientRect(),n=s.elements.boundary.getBoundingClientRect(),s._originalImageWidth=e.width,s._originalImageHeight=e.height,s.options.enableZoom&&(s.options.enforceBoundary&&(r=t.width/e.width,a=t.height/e.height,l=Math.max(r,a)),l>=u&&(u=l+1),d.min=X(l,4),d.max=X(u,4),c=Math.max(n.width/e.width,n.height/e.height),p.call(s,c),i(d)),s._currentZoom=f.scale=c,h[P]=f.toString(),o(m,h),s.data.points.length?C.call(s,s.data.points):E.call(s),w.call(s))}function C(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},s=i.width/n,l=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,m={};m[S]=u+"px "+l+"px",m[P]=new N(h,c,s).toString(),o(t.elements.preview,m),p.call(t,s),t._currentZoom=s}function E(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,s=r-(t.width-n.width)/2,l=a-(t.height-n.height)/2,u=new N(s,l,e._currentZoom);o(e.elements.preview,P,u.toString())}function _(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=t.options.enableExif,e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r?l(i,function(t){u(n,i,parseInt(t)),e&&u(n,i,e)}):e&&u(n,i,e)}function I(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],s=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:s+"px"}),n}function R(e,t){var n=t.points,i=n[0],o=n[1],r=n[2]-n[0],a=n[3]-n[1],s=t.circle,l=document.createElement("canvas"),u=l.getContext("2d"),c=r,h=a;return t.outputWidth&&t.outputHeight&&(c=t.outputWidth,h=t.outputHeight),l.width=c,l.height=h,u.drawImage(e,i,o,r,a,0,0,c,h),s&&(u.fillStyle="#fff",u.globalCompositeOperation="destination-in",u.beginPath(),u.arc(c/2,h/2,c/2,0,2*Math.PI,!0),u.closePath(),u.fill()),l.toDataURL(t.format,t.quality)}function B(e,t){var n,i=this,o=[];if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if("undefined"==typeof e&&i.data.url)return b.call(i),y.call(i),null;n=e.url,o=e.points||[]}i.data.bound=!1,i.data.url=n||i.data.url,i.data.points=(o||i.data.points).map(function(e){return parseFloat(e)});var r=s(n,i.elements.img);return r.then(function(){i.options.useCanvas&&(i.elements.img.exifdata=null,_.call(i,e.orientation)),b.call(i),v.call(i),y.call(i),t&&t()}),r}function X(e,t){return parseFloat(e).toFixed(t||0)}function Z(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=i+n.width,a=o+n.height,s=e._currentZoom;(s===1/0||isNaN(s))&&(s=1);var l=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(l,i/s),o=Math.max(l,o/s),r=Math.max(l,r/s),a=Math.max(l,a/s),{points:[X(i),X(o),X(r),X(a)],zoom:s}}function L(e){var n,i=this,o=Z.call(i),r=t(k,t({},e)),a="string"==typeof e?e:r.type||"viewport",s=r.size,l=r.format,u=r.quality,c=i.elements.viewport.getBoundingClientRect(),h=c.width/c.height;return"viewport"===s?(o.outputWidth=c.width,o.outputHeight=c.height):"object"==typeof s&&(s.width&&s.height?(o.outputWidth=s.width,o.outputHeight=s.height):s.width?(o.outputWidth=s.width,o.outputHeight=s.width/h):s.height&&(o.outputWidth=s.height*h,o.outputHeight=s.height)),q.indexOf(l)>-1&&(o.format="image/"+l,o.quality=u),o.circle="circle"===i.options.viewport.type,o.url=i.data.url,console.log(o),n=new Promise(function(e,t){e("canvas"===a?R.call(i,i.elements.preview,o):I.call(i,o))})}function Y(){b.call(this)}function j(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=(t.elements.img,document.createElement("canvas")),o=1;i.width=n.width,i.height=n.height;var r=i.getContext("2d");r.drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),u(n,i,o),d.call(t)}function F(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function M(e,n){if(this.element=e,this.options=t(t({},M.defaults),n),c.call(this),this.options.url){var i={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,B.call(this,i)}}"function"!=typeof Promise&&!function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],l(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null===n)return void(t._state?e.resolve:e.reject)(t._value);var i;try{i=n(t._value)}catch(o){return void e.reject(o)}e.resolve(i)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void l(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(i){r.call(this,i)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function l(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(o){if(i)return;i=!0,n(o)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype["catch"]=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new s(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){i(r,e)},n)}e[r]=a,0===--o&&t(e)}catch(l){n(l)}}if(0===e.length)return t([]);for(var o=e.length,r=0;r<e.length;r++)i(r,e[r])})},n.resolve=function(e){return e&&"object"==typeof e&&e.constructor===n?e:new n(function(t){t(e)})},n.reject=function(e){return new n(function(t,n){n(e)})},n.race=function(e){return new n(function(t,n){for(var i=0,o=e.length;o>i;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this);var S,P,O,W=["Webkit","Moz","ms"],z=document.createElement("div").style;P=e("transform"),S=e("transformOrigin"),O=e("userSelect");var T="translate3d",A=", 0px",N=function(e,t,n){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(n)};N.parse=function(e){return e.style?N.parse(e.style[P]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?N.fromMatrix(e):N.fromString(e)},N.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new N(parseInt(t[4],10),parseInt(t[5],10),parseFloat(t[0]))},N.fromString=function(e){var t=e.split(") "),n=t[0].substring(T.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new N(o,r,i)},N.prototype.toString=function(){return T+"("+this.x+"px, "+this.y+"px"+A+") scale("+this.scale+")"};var D=function(e){if(!e||!e.style[S])return this.x=0,void(this.y=0);var t=e.style[S].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};D.prototype.toString=function(){return this.x+"px "+this.y+"px"};var H=n(w,500),k={type:"canvas",format:"png",quality:1},q=["jpeg","webp","png"];if(this.jQuery){var $=this.jQuery;$.fn.croppie=function(e){var t=typeof e;if("string"===t){var n=Array.prototype.slice.call(arguments,1),i=$(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,n):this.each(function(){var t=$(this).data("croppie");if(t){var i=t[e];if(!$.isFunction(i))throw"Croppie "+e+" method not found";i.apply(t,n),"destroy"===e&&$(this).removeData("croppie")}})}return this.each(function(){var t=new M(this,e);$(this).data("croppie",t)})}}M.defaults={viewport:{width:100,height:100,type:"square"},boundary:{width:300,height:300},orientationControls:{enabled:!0,leftClass:"",rightClass:""},customClass:"",showZoomer:!0,enableZoom:!0,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,update:function(){}},t(M.prototype,{bind:function(e,t){return B.call(this,e,t)},get:function(){return Z.call(this)},result:function(e){return L.call(this,e)},refresh:function(){return Y.call(this)},setZoom:function(e){p.call(this,e),i(this.elements.zoomer)},rotate:function(e){j.call(this,e)},destroy:function(){return F.call(this)}}),exports.Croppie=window.Croppie=M,"object"==typeof module&&module.exports&&(module.exports=M)});
!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(exports){function e(e){if(e in z)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=W.length;n--;)if(e=W[n]+t,e in z)return e}function t(e,t){e=e||{};for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},arguments.callee(e[n],t[n])):e[n]=t[n];return e}function n(e,t,n){var i;return function(){var o=this,r=arguments,a=function(){i=null,n||e.apply(o,r)},s=n&&!i;clearTimeout(i),i=setTimeout(a,t),s&&e.apply(o,r)}}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;t={},t[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function s(e,t){var n,i=t||new Image;return i.src===e?n=new Promise(function(e){e(i)}):(n=new Promise(function(t){"http"===e.substring(0,4).toLowerCase()&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){setTimeout(function(){t(i)},1)}}),i.src=e),i.style.opacity=0,n}function l(e,t){window.EXIF||t(0),EXIF.getData(e,function(){var e=EXIF.getTag(this,"Orientation");t(e)})}function u(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function c(){var e,t,n,i,a=this,s="croppie-container",l=a.options.viewport.type?"cr-vp-"+a.options.viewport.type:null;a.options.useCanvas=a.options.enableOrientation||h.call(a),a.data={},a.elements={},e=a.elements.boundary=document.createElement("div"),n=a.elements.viewport=document.createElement("div"),t=a.elements.img=document.createElement("img"),i=a.elements.overlay=document.createElement("div"),a.options.useCanvas?(a.elements.canvas=document.createElement("canvas"),a.elements.preview=a.elements.canvas):a.elements.preview=a.elements.img,r(e,"cr-boundary"),o(e,{width:a.options.boundary.width+"px",height:a.options.boundary.height+"px"}),r(n,"cr-viewport"),l&&r(n,l),o(n,{width:a.options.viewport.width+"px",height:a.options.viewport.height+"px"}),r(a.elements.preview,"cr-image"),r(i,"cr-overlay"),a.element.appendChild(e),e.appendChild(a.elements.preview),e.appendChild(n),e.appendChild(i),r(a.element,s),a.options.customClass&&r(a.element,a.options.customClass),g.call(this),a.options.enableZoom&&m.call(a)}function h(){return(this.options.enableExif||this.options.exif)&&window.EXIF}function p(e){this.options.enableZoom&&(this.elements.zoomer.value=X(e,4))}function m(){function e(){d.call(n,{value:parseFloat(o.value),origin:new D(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:N.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i,t.preventDefault(),p.call(n,o),e()}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.01",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function d(e){var t=this,n=e?e.transform:N.parse(t.elements.preview),i=e?e.viewportRect:t.elements.viewport.getBoundingClientRect(),r=e?e.origin:new D(t.elements.preview);if(t._currentZoom=e?e.value:t._currentZoom,n.scale=t._currentZoom,t.options.enforceBoundary){var a=f.call(t,i),s=a.translate,l=a.origin;n.x>=s.maxX&&(r.x=l.minX,n.x=s.maxX),n.x<=s.minX&&(r.x=l.maxX,n.x=s.minX),n.y>=s.maxY&&(r.y=l.minY,n.y=s.maxY),n.y<=s.minY&&(r.y=l.maxY,n.y=s.minY)}var u={};u[P]=n.toString(),u[S]=r.toString(),o(t.elements.preview,u),H.call(t),y.call(t)}function f(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.options.boundary.width/2,a=t.options.boundary.height/2,s=t.elements.preview.getBoundingClientRect(),l=s.width,u=s.height,c=i/2,h=o/2,p=-1*(c/n-r),m=p-(l*(1/n)-i*(1/n)),d=-1*(h/n-a),f=d-(u*(1/n)-o*(1/n)),v=1/n*c,g=l*(1/n)-v,w=1/n*h,y=u*(1/n)-w;return{translate:{maxX:p,minX:m,maxY:d,minY:f},origin:{maxX:g,minX:v,maxY:y,minY:w}}}function v(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=N.parse(e.elements.preview.style[P]),a=new D(e.elements.preview),s=i.top-n.top+i.height/2,l=i.left-n.left+i.width/2,u={},c={};u.y=s/t,u.x=l/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[S]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function g(){function e(e){if(e.preventDefault(),!c){if(c=!0,r=e.pageX,a=e.pageY,e.touches){var i=e.touches[0];r=i.pageX,a=i.pageY}transform=N.parse(u.elements.preview),window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[O]="none",l=u.elements.viewport.getBoundingClientRect()}}function t(e){e.preventDefault();var t=e.pageX,n=e.pageY;if(e.touches){var c=e.touches[0];t=c.pageX,n=c.pageY}var h=t-r,m=n-a,d=u.elements.preview.getBoundingClientRect(),f=transform.y+m,v=transform.x+h,g={};if("touchmove"==e.type&&e.touches.length>1){var y=e.touches[0],x=e.touches[1],b=Math.sqrt((y.pageX-x.pageX)*(y.pageX-x.pageX)+(y.pageY-x.pageY)*(y.pageY-x.pageY));s||(s=b/u._currentZoom);var C=b/s;return p.call(u,C),void i(u.elements.zoomer)}u.options.enforceBoundary?(l.top>d.top+m&&l.bottom<d.bottom+m&&(transform.y=f),l.left>d.left+h&&l.right<d.right+h&&(transform.x=v)):(transform.y=f,transform.x=v),g[P]=transform.toString(),o(u.elements.preview,g),w.call(u),a=n,r=t}function n(){c=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[O]="",v.call(u),y.call(u),s=0}var r,a,s,l,u=this,c=!1;u.elements.overlay.addEventListener("mousedown",e),u.elements.overlay.addEventListener("touchstart",e)}function w(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function y(){var e=this;x.call(e)&&e.options.update.call(e,e.get())}function x(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function b(){var e,t,n,r,a,s=this,l=0,u=1.5,c=1,h={},m=s.elements.preview,d=s.elements.zoomer,f=new N(0,0,c),g=new D,y=x.call(s);y&&!s.data.bound&&(s.data.bound=!0,h[P]=f.toString(),h[S]=g.toString(),h.opacity=1,o(m,h),e=m.getBoundingClientRect(),t=s.elements.viewport.getBoundingClientRect(),n=s.elements.boundary.getBoundingClientRect(),s._originalImageWidth=e.width,s._originalImageHeight=e.height,s.options.enableZoom&&(s.options.enforceBoundary&&(r=t.width/e.width,a=t.height/e.height,l=Math.max(r,a)),l>=u&&(u=l+1),d.min=X(l,4),d.max=X(u,4),c=Math.max(n.width/e.width,n.height/e.height),p.call(s,c),i(d)),s._currentZoom=f.scale=c,h[P]=f.toString(),o(m,h),s.data.points.length?C.call(s,s.data.points):E.call(s),v.call(s),w.call(s))}function C(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},s=i.width/n,l=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,m={};m[S]=u+"px "+l+"px",m[P]=new N(h,c,s).toString(),o(t.elements.preview,m),p.call(t,s),t._currentZoom=s}function E(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,s=r-(t.width-n.width)/2,l=a-(t.height-n.height)/2,u=new N(s,l,e._currentZoom);o(e.elements.preview,P,u.toString())}function _(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=h.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r?l(i,function(t){u(n,i,parseInt(t)),e&&u(n,i,e)}):e&&u(n,i,e)}function I(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],s=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:s+"px"}),n}function R(e,t){var n=t.points,i=n[0],o=n[1],r=n[2]-n[0],a=n[3]-n[1],s=t.circle,l=document.createElement("canvas"),u=l.getContext("2d"),c=r,h=a;return t.outputWidth&&t.outputHeight&&(c=t.outputWidth,h=t.outputHeight),l.width=c,l.height=h,u.drawImage(e,i,o,r,a,0,0,c,h),s&&(u.fillStyle="#fff",u.globalCompositeOperation="destination-in",u.beginPath(),u.arc(c/2,h/2,c/2,0,2*Math.PI,!0),u.closePath(),u.fill()),l.toDataURL(t.format,t.quality)}function B(e,t){var n,i=this,o=[];if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if("undefined"==typeof e&&i.data.url)return b.call(i),y.call(i),null;n=e.url,o=e.points||[]}i.data.bound=!1,i.data.url=n||i.data.url,i.data.points=(o||i.data.points).map(function(e){return parseFloat(e)});var r=s(n,i.elements.img);return r.then(function(){i.options.useCanvas&&(i.elements.img.exifdata=null,_.call(i,e.orientation||1)),b.call(i),y.call(i),t&&t()}),r}function X(e,t){return parseFloat(e).toFixed(t||0)}function Z(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=i+n.width,a=o+n.height,s=e._currentZoom;(s===1/0||isNaN(s))&&(s=1);var l=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(l,i/s),o=Math.max(l,o/s),r=Math.max(l,r/s),a=Math.max(l,a/s),{points:[X(i),X(o),X(r),X(a)],zoom:s}}function L(e){var n,i=this,o=Z.call(i),r=t(k,t({},e)),a="string"==typeof e?e:r.type||"viewport",s=r.size,l=r.format,u=r.quality,c=i.elements.viewport.getBoundingClientRect(),h=c.width/c.height;return"viewport"===s?(o.outputWidth=c.width,o.outputHeight=c.height):"object"==typeof s&&(s.width&&s.height?(o.outputWidth=s.width,o.outputHeight=s.height):s.width?(o.outputWidth=s.width,o.outputHeight=s.width/h):s.height&&(o.outputWidth=s.height*h,o.outputHeight=s.height)),q.indexOf(l)>-1&&(o.format="image/"+l,o.quality=u),o.circle="circle"===i.options.viewport.type,o.url=i.data.url,n=new Promise(function(e){e("canvas"===a?R.call(i,i.elements.preview,o):I.call(i,o))})}function Y(){b.call(this)}function j(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=(t.elements.img,document.createElement("canvas")),o=1;i.width=n.width,i.height=n.height;var r=i.getContext("2d");r.drawImage(n,0,0),(90===e||-270===e)&&(o=6),(-90===e||270===e)&&(o=8),(180===e||-180===e)&&(o=3),u(n,i,o),d.call(t)}function F(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function M(e,n){if(this.element=e,this.options=t(t({},M.defaults),n),c.call(this),this.options.url){var i={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,B.call(this,i)}}"function"!=typeof Promise&&!function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],l(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null===n)return void(t._state?e.resolve:e.reject)(t._value);var i;try{i=n(t._value)}catch(o){return void e.reject(o)}e.resolve(i)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void l(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(i){r.call(this,i)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function l(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(o){if(i)return;i=!0,n(o)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype["catch"]=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new s(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){i(r,e)},n)}e[r]=a,0===--o&&t(e)}catch(l){n(l)}}if(0===e.length)return t([]);for(var o=e.length,r=0;r<e.length;r++)i(r,e[r])})},n.resolve=function(e){return e&&"object"==typeof e&&e.constructor===n?e:new n(function(t){t(e)})},n.reject=function(e){return new n(function(t,n){n(e)})},n.race=function(e){return new n(function(t,n){for(var i=0,o=e.length;o>i;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this);var S,P,O,W=["Webkit","Moz","ms"],z=document.createElement("div").style;P=e("transform"),S=e("transformOrigin"),O=e("userSelect");var T="translate3d",A=", 0px",N=function(e,t,n){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(n)};N.parse=function(e){return e.style?N.parse(e.style[P]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?N.fromMatrix(e):N.fromString(e)},N.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new N(parseInt(t[4],10),parseInt(t[5],10),parseFloat(t[0]))},N.fromString=function(e){var t=e.split(") "),n=t[0].substring(T.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new N(o,r,i)},N.prototype.toString=function(){return T+"("+this.x+"px, "+this.y+"px"+A+") scale("+this.scale+")"};var D=function(e){if(!e||!e.style[S])return this.x=0,void(this.y=0);var t=e.style[S].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};D.prototype.toString=function(){return this.x+"px "+this.y+"px"};var H=n(w,500),k={type:"canvas",format:"png",quality:1},q=["jpeg","webp","png"];if(window.jQuery){var $=window.jQuery;$.fn.croppie=function(e){var t=typeof e;if("string"===t){var n=Array.prototype.slice.call(arguments,1),i=$(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,n):this.each(function(){var t=$(this).data("croppie");if(t){var i=t[e];if(!$.isFunction(i))throw"Croppie "+e+" method not found";i.apply(t,n),"destroy"===e&&$(this).removeData("croppie")}})}return this.each(function(){var t=new M(this,e);$(this).data("croppie",t)})}}M.defaults={viewport:{width:100,height:100,type:"square"},boundary:{width:300,height:300},orientationControls:{enabled:!0,leftClass:"",rightClass:""},customClass:"",showZoomer:!0,enableZoom:!0,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,update:function(){}},t(M.prototype,{bind:function(e,t){return B.call(this,e,t)},get:function(){return Z.call(this)},result:function(e){return L.call(this,e)},refresh:function(){return Y.call(this)},setZoom:function(e){p.call(this,e),i(this.elements.zoomer)},rotate:function(e){j.call(this,e)},destroy:function(){return F.call(this)}}),exports.Croppie=window.Croppie=M,"object"==typeof module&&module.exports&&(module.exports=M)});
{
"name": "croppie",
"version": "2.1.0",
"version": "2.1.1",
"description": "A simple javascript image cropper",

@@ -5,0 +5,0 @@ "main": "croppie.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc