react-crop-img - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

index.js

@@ -1,1 +0,1 @@
-!function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports={lastDescriptionKey:"canvas_last_description",lastActionInfoKey:"canvas_last_action_info",lastImageDataKey:"canvas_last_image_data",lastImageNameKey:"canvas_last_image_name"}},function(t,e,n){"use strict";n.r(e);var{lastDescriptionKey:i,lastActionInfoKey:o}=n(0);var a=(t,e,n,a,r,s,l,c,g,d,u)=>{const h=e.getContext("2d"),f={},m={},p={lastDescription:null,lastActionInfo:null};try{p.lastDescription=localStorage.getItem(i)&&JSON.parse(localStorage.getItem(i)),p.lastActionInfo=localStorage.getItem(o)&&JSON.parse(localStorage.getItem(o))}catch(t){console.error(t)}let y=d,I=n,v=I.naturalWidth,S=I.naturalHeight,x=v>S,w=1,D=1,A=(5+w-1)/300,C={},b=!1,z=!1;return{start:function(){t.src=I.src,this.updateFileName(),this.initBackgroundImageSizeAndPosition(),this.initSizeControl(),a.addEventListener("mousedown",t=>{z=!0,f.x=t.clientX,f.y=t.clientY,f.imageX=C.x,f.imageY=C.y}),a.addEventListener("mouseup",t=>{z=!1}),a.addEventListener("mousemove",t=>{if(!z)return;const e=t.clientX-f.x,n=t.clientY-f.y;let i=f.imageX+e,o=f.imageY+n;this.updateBackgroundImageSizeAndPosition(i,o,C.width,C.height)})},updateFileName:function(){g.innerText=u||"No File Chosen"},initSizeControl:function(){w=C.orginalHeight/300>C.orginalWidth/450?1/(C.orginalWidth/450):1/(C.orginalHeight/300),D=(1-w)/(A=(5+w)/300),s.style.left=D+"px",l.style.width=D/300*100+"%",r.addEventListener("mousedown",t=>{b=!0,m.left=s.style.left?parseInt(s.style.left):0,m.x=t.clientX,m.y=t.clientY}),r.addEventListener("mouseup",t=>{b=!1}),r.addEventListener("mousemove",t=>{if(!b)return;const e=t.clientX-m.x;let n=m.left+e;n<0&&(n=0),n>300&&(n=300),s.style.left=n+"px",l.style.width=n/300*100+"%",this.updateImageSizeWithControl(n)})},updateImageSizeWithControl:function(t){let e=1+(t-D)*A;e<w&&(e=w),e>5&&(e=5);let n=C.orginalWidth*e,i=C.orginalHeight*e;n<450&&(n=450,i=C.orginalHeight/C.orginalWidth*n),i<300&&(i=300,n=C.orginalWidth/C.orginalHeight*i);const o=(n-C.width)/2,a=(i-C.height)/2,r=C.x-o,s=C.y-a;this.updateBackgroundImageSizeAndPosition(r,s,n,i)},initBackgroundImageSizeAndPosition:function(){if(x){const t=v/S*600;C.orginalWidth=t,C.orginalHeight=600,this.updateBackgroundImageSizeAndPosition(0,0,t,600)}else{const t=S/v*600;C.orginalWidth=600,C.orginalHeight=t,this.updateBackgroundImageSizeAndPosition(0,0,600,t)}},updateBackgroundImageSizeAndPosition:function(e,n,i,o){const a=525-C.width,r=450-C.height;let s=e,l=n;s>75&&(s=75),l>150&&(l=150),s<a&&(s=a),l<r&&(l=r),t.style.left=s+"px",t.style.top=l+"px",t.style.width=i+"px",t.style.height=o+"px",C=Object.assign(C,{x:s,y:l,width:i,height:o}),this.updateCanvasDisplay()},updateCanvasDisplay:function(){const e=75-C.x,n=150-C.y;h.drawImage(I,-e,-n,t.width,t.height)},setBodyScrollEnable:function(t){document.body.style.overflow=t?"auto":"hidden"},convertBackgroundImageInfoToInch:function(){return{width:(3.2*C.width/96).toFixed(2),height:(3.2*C.height/96).toFixed(2),x:(3.2*(75-C.x)/96).toFixed(2),y:(3.2*(150-C.y)/96).toFixed(2)}},convertInchToBackgroundImageInfo:function(t,e,n,i){return{width:96*t/3.2,height:96*e/3.2,x:75-96*n/3.2,y:150-96*i/3.2}},showDescription:function(){const t=this.convertBackgroundImageInfoToInch(),e={canvas:{width:15,height:10,photo:{id:u,width:t.width,height:t.height,x:t.x,y:t.y}}},n={imageData:y,imageName:u,sizeControllerLeft:s.style.left,sizeControlProgressWidth:l.style.width};return p.lastDescription=e,p.lastActionInfo=n,c.style.display="inline-block",localStorage.setItem(i,JSON.stringify(e)),localStorage.setItem(o,JSON.stringify(n)),e},restoreLastDescription:function(){if(p.lastDescription&&p.lastActionInfo){let t=new Image;t.src=p.lastActionInfo.imageData,y=p.lastActionInfo.imageData;let e=this;t.onload=function(){I=t,u=p.lastActionInfo.imageName||"",v=I.naturalWidth,S=I.naturalHeight,x=v>S,e.start();const n=p.lastDescription.canvas.photo,i=e.convertInchToBackgroundImageInfo(n.width,n.height,n.x,n.y);e.updateBackgroundImageSizeAndPosition(i.x,i.y,i.width,i.height),s.style.left=p.lastActionInfo.sizeControllerLeft,l.style.width=p.lastActionInfo.sizeControlProgressWidth}}}}};const{lastDescriptionKey:r,lastActionInfoKey:s}=n(0),l=function(){let t,e,n,i,o,l,c,g,d,u,h,f,m;const p=t=>{e&&(e.innerHTML+="<p>"+t+"</p>")};return{init:a=>{t=a.imageContainer,e=a.debugContainer,n=a.generateButton,i=a.loadPreviousButton,o=a.backgroundImage,l=a.canvas,c=a.sizeControllerWrap,g=a.sizeController,d=a.sizeControlProgress,u=a.fileNameDom,h=a.fileSelector,m=a.onCrop},start:()=>{h.onchange=function(e){for(var n,r=e.target.files,s=0;s<r.length;++s)switch((n=r[s]).type){case"image/jpeg":case"image/png":case"image/gif":var h=new FileReader;return h.onload=function(e){var r=new Image;r.src=h.result,r.onload=function(){var e=r.naturalWidth,s=r.naturalHeight;p("Loaded Image w/dimensions "+e+" x "+s),(f=a(o,l,r,t,c,g,d,i,u,h.result,n.name)).start()}},void h.readAsDataURL(n);default:p("not a valid Image file :"+n.name)}},n.onclick=function(t){p("GENERATE BUTTON CLICKED!! Should this do something else?"),f&&p(JSON.stringify(f.showDescription())),m&&"function"==typeof m&&m(f.showDescription())},i.onclick=function(e){if(h.value="",f)f.restoreLastDescription();else{const e=localStorage.getItem(r)&&JSON.parse(localStorage.getItem(r)),n=localStorage.getItem(s)&&JSON.parse(localStorage.getItem(s));if(!n||!e)return;let h=new Image;h.src=n.imageData,h.onload=function(){var e=h.naturalWidth,r=h.naturalHeight;p("Loaded Image w/dimensions "+e+" x "+r),(f=a(o,l,h,t,c,g,d,i,u,n.imageData,n.imageName||"")).start(),f.restoreLastDescription()}}}}}}();e.default=l}]);
+!function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports={lastDescriptionKey:"canvas_last_description",lastActionInfoKey:"canvas_last_action_info",lastImageDataKey:"canvas_last_image_data",lastImageNameKey:"canvas_last_image_name"}},function(t,e,n){"use strict";n.r(e);var{lastDescriptionKey:i,lastActionInfoKey:o}=n(0);var a=(t,e,n,a,r,s,l,c,g,d,u)=>{const h=e.getContext("2d"),f=getComputedStyle(a,null),m=parseInt(f.width),p=parseInt(f.height),y=e.width,I=e.height,v=(m-450)/2,S=(p-I)/2,w={},x={},D={lastDescription:null,lastActionInfo:null};try{D.lastDescription=localStorage.getItem(i)&&JSON.parse(localStorage.getItem(i)),D.lastActionInfo=localStorage.getItem(o)&&JSON.parse(localStorage.getItem(o))}catch(t){console.error(t)}let A=d,C=n,b=C.naturalWidth,z=C.naturalHeight,N=b>z,P=1,_=1,k=(5+P-1)/I,B={},L=!1,O=!1;return{start:function(){t.src=C.src,this.updateFileName(),this.initBackgroundImageSizeAndPosition(),this.initSizeControl(),a.addEventListener("mousedown",t=>{O=!0,w.x=t.clientX,w.y=t.clientY,w.imageX=B.x,w.imageY=B.y}),a.addEventListener("mouseup",t=>{O=!1}),a.addEventListener("mousemove",t=>{if(!O)return;const e=t.clientX-w.x,n=t.clientY-w.y;let i=w.imageX+e,o=w.imageY+n;this.updateBackgroundImageSizeAndPosition(i,o,B.width,B.height)})},updateFileName:function(){g.innerText=u||"No File Chosen"},initSizeControl:function(){P=B.orginalHeight/I>B.orginalWidth/y?1/(B.orginalWidth/y):1/(B.orginalHeight/I),_=(1-P)/(k=(5+P)/I),s.style.left=_+"px",l.style.width=_/I*100+"%",r.addEventListener("mousedown",t=>{L=!0,x.left=s.style.left?parseInt(s.style.left):0,x.x=t.clientX,x.y=t.clientY}),r.addEventListener("mouseup",t=>{L=!1}),r.addEventListener("mousemove",t=>{if(!L)return;const e=t.clientX-x.x;let n=x.left+e;n<0&&(n=0),n>I&&(n=I),s.style.left=n+"px",l.style.width=n/I*100+"%",this.updateImageSizeWithControl(n)})},updateImageSizeWithControl:function(t){let e=1+(t-_)*k;e<P&&(e=P),e>5&&(e=5);let n=B.orginalWidth*e,i=B.orginalHeight*e;n<y&&(n=y,i=B.orginalHeight/B.orginalWidth*n),i<I&&(i=I,n=B.orginalWidth/B.orginalHeight*i);const o=(n-B.width)/2,a=(i-B.height)/2,r=B.x-o,s=B.y-a;this.updateBackgroundImageSizeAndPosition(r,s,n,i)},initBackgroundImageSizeAndPosition:function(){if(N){const t=b/z*m;B.orginalWidth=t,B.orginalHeight=p,this.updateBackgroundImageSizeAndPosition(0,0,t,p)}else{const t=z/b*p;B.orginalWidth=m,B.orginalHeight=t,this.updateBackgroundImageSizeAndPosition(0,0,m,t)}},updateBackgroundImageSizeAndPosition:function(e,n,i,o){const a=v,r=S,s=v+y-B.width,l=S+I-B.height;let c=e,g=n;c>a&&(c=a),g>r&&(g=r),c<s&&(c=s),g<l&&(g=l),t.style.left=c+"px",t.style.top=g+"px",t.style.width=i+"px",t.style.height=o+"px",B=Object.assign(B,{x:c,y:g,width:i,height:o}),this.updateCanvasDisplay()},updateCanvasDisplay:function(){const e=v-B.x,n=S-B.y;h.drawImage(C,-e,-n,t.width,t.height)},setBodyScrollEnable:function(t){document.body.style.overflow=t?"auto":"hidden"},convertBackgroundImageInfoToInch:function(){return{width:(3.2*B.width/96).toFixed(2),height:(3.2*B.height/96).toFixed(2),x:(3.2*(v-B.x)/96).toFixed(2),y:(3.2*(S-B.y)/96).toFixed(2)}},convertInchToBackgroundImageInfo:function(t,e,n,i){return{width:96*t/3.2,height:96*e/3.2,x:v-96*n/3.2,y:S-96*i/3.2}},showDescription:function(){const t=this.convertBackgroundImageInfoToInch(),e={canvas:{width:15,height:10,photo:{id:u,width:t.width,height:t.height,x:t.x,y:t.y}}},n={imageData:A,imageName:u,sizeControllerLeft:s.style.left,sizeControlProgressWidth:l.style.width};return D.lastDescription=e,D.lastActionInfo=n,c.style.display="inline-block",localStorage.setItem(i,JSON.stringify(e)),localStorage.setItem(o,JSON.stringify(n)),e},restoreLastDescription:function(){if(D.lastDescription&&D.lastActionInfo){let t=new Image;t.src=D.lastActionInfo.imageData,A=D.lastActionInfo.imageData;let e=this;t.onload=function(){C=t,u=D.lastActionInfo.imageName||"",b=C.naturalWidth,z=C.naturalHeight,N=b>z,e.start();const n=D.lastDescription.canvas.photo,i=e.convertInchToBackgroundImageInfo(n.width,n.height,n.x,n.y);e.updateBackgroundImageSizeAndPosition(i.x,i.y,i.width,i.height),s.style.left=D.lastActionInfo.sizeControllerLeft,l.style.width=D.lastActionInfo.sizeControlProgressWidth}}}}};const{lastDescriptionKey:r,lastActionInfoKey:s}=n(0),l=function(){let t,e,n,i,o,l,c,g,d,u,h,f,m;const p=t=>{e&&(e.innerHTML+="<p>"+t+"</p>")};return{init:a=>{t=a.imageContainer,e=a.debugContainer,n=a.generateButton,i=a.loadPreviousButton,o=a.backgroundImage,l=a.canvas,c=a.sizeControllerWrap,g=a.sizeController,d=a.sizeControlProgress,u=a.fileNameDom,h=a.fileSelector,m=a.onCrop},start:()=>{h.onchange=function(e){for(var n,r=e.target.files,s=0;s<r.length;++s)switch((n=r[s]).type){case"image/jpeg":case"image/png":case"image/gif":var h=new FileReader;return h.onload=function(e){var r=new Image;r.src=h.result,r.onload=function(){var e=r.naturalWidth,s=r.naturalHeight;p("Loaded Image w/dimensions "+e+" x "+s),(f=a(o,l,r,t,c,g,d,i,u,h.result,n.name)).start()}},void h.readAsDataURL(n);default:p("not a valid Image file :"+n.name)}},n.onclick=function(t){p("GENERATE BUTTON CLICKED!! Should this do something else?"),f&&p(JSON.stringify(f.showDescription())),m&&"function"==typeof m&&m(f.showDescription())},i.onclick=function(e){if(h.value="",f)f.restoreLastDescription();else{const e=localStorage.getItem(r)&&JSON.parse(localStorage.getItem(r)),n=localStorage.getItem(s)&&JSON.parse(localStorage.getItem(s));if(!n||!e)return;let h=new Image;h.src=n.imageData,h.onload=function(){var e=h.naturalWidth,r=h.naturalHeight;p("Loaded Image w/dimensions "+e+" x "+r),(f=a(o,l,h,t,c,g,d,i,u,n.imageData,n.imageName||"")).start(),f.restoreLastDescription()}}}}}}();e.default=l}]);

package.json

 {
   "name": "react-crop-img",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
-  "keywords": "react image-crop crop react-image",
+  "keywords": "react image-crop crop react-image crop image canvuas crop",
   "main": "index.js",
@@ -10,4 +10,4 @@ "scripts": {
   },
-  "author": "",
+  "author": "EvanLau",
   "license": "ISC"
 }

README.md

 ### Simple image crop base on react
-##### Config all take by user: imageContainer, debugContainer, generateButton, loadPreviousButton, backgroundImage, canvas, sizeControllerWrap, sizeController, sizeControlProgress, fileNameDom, fileSelector, editor, onCrop;
-##### github demo: https://github.com/liuxiaocong/react-image-crop/tree/master/react-demo/app
+### Config all take by user: imageContainer, debugContainer, generateButton, loadPreviousButton, backgroundImage, canvas, sizeControllerWrap, sizeController, sizeControlProgress, fileNameDom, fileSelector, editor, onCrop;
+### Version History
+##### 1.0.3  User can define crop size by set canvas width and height
+##### 1.0.2  Make it as react modules and add react demo
+##### 1.0.0 ~ 1.0.1  Base function implement, simple ui demo
+
+### github demo: https://github.com/liuxiaocong/react-image-crop/tree/master/react-demo/app

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7376

increased by4.24%

Number of low maintenance alerts

1

decreased by-50%

Number of lines in readme file

8

increased by166.67%

No dependency changes