cropimage.min.js

/** ---------------------------------------------------------------------------
	*											CropImage Plugin with JQuery
	* ---------------------------------------------------------------------------
	* Version: 1.2.1
	* Author: Fabrice K.E.M
	* Created: 10/06/2018
	* Updated: 27/06/2024
	* Repository: https://github.com/fabrice8/cropimage
	*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&module.exports?module.exports=t(require("jquery")):t(jQuery)}((function(t){"use strict";var i={none:"none",dark:"rgba(20, 20, 20, .6)",light:"rgba(250, 250, 250, .6)"},e=!1,o=!1;if(void 0===t||!t.hasOwnProperty("fn"))throw new Error("CropImage requires jQuery");function h(i){t(".R-container").append('<div class="R-error">'+i+"</div>"),setTimeout((()=>t(".R-container .R-error").remove()),8e3)}function n(i,n,a){var r,d={width:n.minWidth,height:n.minHeight};/x/.test(n.imgFormat)?(r=n.imgFormat.split("x"),d.width=Number(r[0]),d.height=Number(r[1]),e=!0,o=!1,!1,t(".R-container [data-action]").hide()):/[1-9]\/[1-9]/.test(n.imgFormat)?(r=n.imgFormat.split("/"),d.width?d.height=d.width*(Number(r[1])/Number(r[0])):d.height&&(d.width=d.height*Number(r[0])/Number(r[1])),e=!1,o=!0,!1,t(".R-container [data-action]").show(),t(".R-container [class^=R-side-]").hide()):(d.width=d.width||10,d.height=d.height||10,e=!1,o=!1,!0,t(".R-container [data-action]").show()),i.width>=d.width&&i.height>=d.height?a({width:i.width,height:i.height,minWidth:d.width,minHeight:d.height,ratio:Number(d.width)/Number(d.height)}):h("This image is smaller than "+d.width+"x"+d.height)}function a(a,r){var d,s=t.extend({image:!1,imgFormat:"auto",minWidth:0,minHeight:0,device:"all",circleCrop:!1,zoomable:!0,zoomMax:2,background:"transparent",inBoundGrid:!0,outBoundColor:"dark",btnDoneAttr:".R-container .R-btn-done"},a);t(this).html(function(t){return`<div class="R-container">\n\t\t\t\t\t\t\t<div class="R-cover"></div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class="R-adapter">\n\t\t\t\t\t\t\t\t<canvas class="statCanvas"></canvas>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<div class="R-cropper ${t.circleCrop?"circle":""} ${t.noBorder?"":"border"}">\n\t\t\t\t\t\t\t\t\t<canvas class="dynaCanvas"></canvas>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t${t.inBoundGrid?'<div class="R-grid">\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-col-1"></div>\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-col-2"></div>\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-col-3"></div>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-raw-1"></div>\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-raw-2"></div>\n\t\t\t\t\t\t\t\t\t\t\t<div class="R-raw-3"></div>\n\t\t\t\t\t\t\t\t\t\t</div>':""}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class="R-corner-lt" data-action="lt-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-corner-rt" data-action="rt-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-corner-rb" data-action="rb-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-corner-lb" data-action="lb-crop"></div>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class="R-side-left" data-action="l-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-side-top" data-action="t-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-side-right" data-action="r-crop"></div>\n\t\t\t\t\t\t\t\t\t<div class="R-side-bottom" data-action="b-crop"></div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>`}(s));let c=null,g=t(".R-container"),p=t(".R-adapter"),l=t(".R-cropper"),w=t(".R-cover"),m=t('[class^="R-side-"], [class^="R-corner-"]'),u=null,f=null,v=null,x=null;function R(i){s.image=i,c=new Image,"file:"==window.location.protocol?console.warn("[CropImage] - Exporting cropped image might not work because of <file://> protocol"):c.crossOrigin="*",c.onerror=function(t){console.error(`Error loading the image: ${t}`)},c.onload=function(){n(c,s,I),t(window).on("resize",(function(){n(c,s,I)}))},d=c.src=function(t){return"string"!=typeof t?window.URL.createObjectURL(t):t}(s.image),g.addClass(s.background),g.find(".R-error").remove()}function b(t,i=!1){return s.noBorder?t:t+(i?2:-4)}function I(h){u=document.querySelector(".dynaCanvas"),f=document.querySelector(".statCanvas"),v=f.getContext("2d"),x=u.getContext("2d"),x.imageSmoothingEnabled=!0,x.imageSmoothingQuality="high",function(t,i,e){var o,h=t.width,n=t.height;(h*=i.height()/t.height)>i.width()&&(h=i.width()),(n*=i.width()/t.width)>i.height()&&(n=i.height()),o=(i.height()-n)/2,e({width:h,height:n,left:(i.width()-h)/2,top:o,HzImage:t.width!=t.height?t.width>t.height:null})}(h,g,(function(n){f.width=n.width,f.height=n.height,w.css({left:n.left+"px",top:n.top+"px",right:n.left+"px",bottom:n.top+"px",background:i[i.hasOwnProperty(s.outBoundColor)?s.outBoundColor:"dark"]}),function(t,i,e){var o,h,n=i.width,a=i.height;1!=t.ratio?t.ratio<1?(o=n<a?n/a>t.minWidth/t.minHeight?t.minWidth*a/t.minHeight:n:t.minWidth<t.minHeight?t.minWidth*a/t.minHeight:n,h=n<a?n/a>t.minWidth/t.minHeight?a:t.minHeight*n/t.minWidth:t.minWidth<t.minHeight?a:n*(t.minHeight/a)):(o=n<a?n:n/a>t.minWidth/t.minHeight?t.minWidth*a/t.minHeight:n,h=n<a?t.minHeight*n/t.minWidth:n/a>t.minWidth/t.minHeight?a:n*(t.minHeight/a)):o=h=n<a?n:a,e({width:o,height:h,left:i.HzImage?(n-o)/2:0,top:i.HzImage?0:(a-h)/2})}(h,n,(function(i){l.css({width:u.width=b(i.width),height:u.height=b(i.height),left:i.left+"px",top:i.top+"px"});var a=n.width-u.width,d=n.height-u.height,g=0+n.width,R=0+n.height,I=h.minWidth||l.width()/2,y=h.minHeight||l.height()/2,H=!1,k={width:n.width,height:n.height,left:0,top:0},C={},W={},E=!0,X=0,Y=1;function z(t,i,e){var o=(e?t.originalEvent.touches[0].clientX:t.pageX)-i.x,h=(e?t.originalEvent.touches[0].clientY:t.pageY)-i.y,n=o>=0&&o<=b(a),r=h>=0&&h<=b(d);n?l.css("left",o+"px"):o=l.position().left,r?l.css("top",h+"px"):h=l.position().top,Y>1&&(v.clearRect(0,0,k.width,k.height),i.ox=Math.floor(t.pageX-w.offset().left),i.oy=Math.floor(t.pageY-w.offset().top),v.drawImage(c,-i.ox*X,-i.oy*X,k.width,k.height)),x.drawImage(f,b(o,!0),b(h,!0),l.width(),l.height(),0,0,l.width(),l.height())}function j(t,i,e){var a,r,d=(e?t.originalEvent.touches[0].pageX:t.pageX)-l.offset().left,s=(e?t.originalEvent.touches[0].pageY:t.pageY)-l.offset().top,c=(e?t.originalEvent.touches[0].clientX:t.clientX)-p.offset().left,w=(e?t.originalEvent.touches[0].clientY:t.clientY)-p.offset().top;switch(i.t.data("action")){case"l-crop":a=l.width()-d,0<=c&&a>I&&(l.css({width:a+"px",left:c+"px"}),u.width=a,x.drawImage(f,b(c,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height()));break;case"r-crop":a=d,b(g)>=c&&a>I&&(l.css("width",a+"px"),u.width=a,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height()));break;case"t-crop":r=l.height()-s,0<=w&&r>y&&(l.css({height:r+"px",top:w+"px"}),u.height=r,x.drawImage(f,b(l.position().left,!0),w,b(l.width(),!0),r,0,0,l.width(),r));break;case"b-crop":r=s,b(R)>=w&&r>y&&(l.css("height",r+"px"),u.height=r,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),l.width(),r,0,0,l.width(),r));break;case"lt-crop":a=l.width()-d,r=l.height()-s,o?0<=c&&a>I&&(r=a/h.ratio,0<=(w=i.topHeight-r)&&w<=b(n.height-r)&&r>y&&(l.css({width:a+"px",height:r+"px",left:c+"px",top:w+"px"}),u.width=a,u.height=r,x.drawImage(f,b(c,!0),b(w,!0),a,r,0,0,a,r))):(0<=c&&a>I&&(l.css({width:a+"px",left:c+"px"}),u.width=a,x.drawImage(f,b(c,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height())),0<=w&&r>y&&(l.css({height:r+"px",top:w+"px"}),u.height=r,x.drawImage(f,b(l.position().left,!0),b(w,!0),l.width(),r,0,0,l.width(),r)));break;case"lb-crop":a=l.width()-d,r=s,o?0<=c&&a>I&&(r=a/h.ratio,b(R)>=w&&r>y&&r<b(n.height-l.position().top)&&(l.css({width:a+"px",height:r+"px",left:c+"px"}),u.width=a,u.height=r,x.drawImage(f,b(c,!0),b(l.position().top,!0),a,r,0,0,a,r))):(0<=c&&a>I&&(l.css({width:a+"px",left:c+"px"}),u.width=a,x.drawImage(f,b(c,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height())),b(R)>=w&&r>y&&(l.css("height",r+"px"),u.height=r,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),l.width(),r,0,0,l.width(),r)));break;case"rt-crop":a=d,r=l.height()-s,o?b(g)>=c&&a>I&&(r=a/h.ratio,0<=(w=i.topHeight-r)&&r>y&&(l.css({width:a+"px",height:r+"px",top:w+"px"}),u.width=a,u.height=r,x.drawImage(f,b(l.position().left,!0),b(w,!0),a,r,0,0,a,r)),i.lastLeft=c):(b(g)>=c&&a>I&&(l.css("width",a+"px"),u.width=a,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height())),0<=w&&r>y&&(l.css({height:r+"px",top:w+"px"}),u.height=r,x.drawImage(f,b(l.position().left,!0),b(w,!0),l.width(),r,0,0,l.width(),r)));break;case"rb-crop":a=d,r=s,o?b(g)>=c&&a>I&&(r=a/h.ratio,b(R)>=w&&r>y&&r<b(n.height-l.position().top)&&(l.css({width:a+"px",height:r+"px"}),u.width=a,u.height=r,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),a,r,0,0,a,r))):(b(g)>=c&&a>I&&(l.css("width",a+"px"),u.width=a,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),a,l.height(),0,0,a,l.height())),b(R)>=w&&r>y&&(l.css("height",r+"px"),u.height=r,x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),l.width(),r,0,0,l.width(),r)))}}function N(){H=!1,C={},W={}}setTimeout((()=>{v.drawImage(c,0,0,n.width,n.height),p.css({left:n.left,top:n.top,width:n.width,height:n.height}),x.drawImage(f,b(i.left,!0),b(i.top,!0),i.width,i.height,0,0,i.width,i.height)}),10),l.mousedown((function(t){H||(C.t=l,C.x=t.pageX-l.position().left,C.y=t.pageY-l.position().top),a=n.width-l.width(),d=n.height-l.height()})).dblclick((function(t){s.zoomable&&(1==Y&&(E=!0),Y>s.zoomMax-.5&&(E=!1),C.ox=Math.floor(t.pageX-w.offset().left),C.oy=Math.floor(t.pageY-w.offset().top),function(t){v.clearRect(0,0,k.width,k.height),t&&Y<s.zoomMax?Y++:Y>1&&Y--;k.width=n.width*Y,k.height=n.height*Y,X=Y-(Y>1?Y/2:0),k.left=Y>1?-C.ox*X:0,k.top=Y>1?-C.oy*X:0,v.drawImage(c,k.left,k.top,k.width,k.height),x.drawImage(f,b(l.position().left,!0),b(l.position().top,!0),l.width(),l.height(),0,0,l.width(),l.height())}(E))})).touchstart((function(t){H||(C.t=l,C.x=t.originalEvent.touches[0].clientX-l.position().left,C.y=t.originalEvent.touches[0].clientY-l.position().top),a=n.width-l.width(),d=n.height-l.height()})),m.mousedown((function(i){H=!0,W.t=t(this),W.topHeight=l.position().top+l.height()})),t(document).mouseup((function(){N()})).mousemove((function(t){t.preventDefault(),!e&&W.t&&j(t,W)})).touchend((function(){N()})),p.mousemove((function(t){t.preventDefault(),C.t&&z(t,C)})).touchmove((function(t){t.preventDefault(),C.t?z(t,C,!0):W.t&&(W.x||W.y)&&j(t,W,!0)})),t(s.btnDoneAttr).click((function(){"function"==typeof r&&r(u.toDataURL("image/jpeg"))}))}))}))}return s.image&&R(s.image),{setImage:R,getImage:function(t="jpeg"){if(d)return u.toDataURL("image/"+t.toLowerCase());h("Configuration Error: Undefined image URL or blob image file")},reset:function(){s.image=!1,d="",c=null,v.clearRect(0,0,v.canvas.width,v.canvas.height),x.clearRect(0,0,x.canvas.width,x.canvas.height),g.find(".R-error").remove()}}}return t.fn.cropimage=a,t.fn.extend({touchend:function(t){return t?this.bind("touchend",t):this.trigger("touchend")},touchstart:function(t){return t?this.bind("touchstart",t):this.trigger("touchstart")},touchmove:function(t){return t?this.bind("touchmove",t):this.trigger("touchmove")}}),a}));