rc-image-crop 1.0.1

package/README.md

@@ -0,0 +1,43 @@
+# rc-image-crop
+
+rc-image-crop is a React component that utilizes the powerful "react-easy-crop" library to provide easy-to-use image cropping functionality for your web applications. It allows users to select and crop images with a user-friendly interface.
+
+## Features
+
+- Crop images with a simple and intuitive user interface.
+- Customizable aspect ratio for cropping.
+- Zoom in/out and pan options for precise cropping.
+- Supports various image formats and sources.
+- Keyboard accessibility for a seamless user experience.
+
+## Installation
+
+You can install rc-image-crop using npm or yarn:
+
+```bash
+npm install rc-image-crop
+# or
+yarn add rc-image-crop
+
+## Usage
+
+import ImageCropper from "rc-image-crop";
+    <ImageCropper
+        image="yourimagepath"
+        aspect={4 / 3}
+        showGrid={true}
+        //
+        crop={crop}
+        onCropChange={setCrop}
+        rotation={rotation}
+        onRotationChange={setRotation}
+        zoom={zoom}
+        onZoomChange={setZoom}
+        //
+        setCbImage={setCbImage}
+        parentCls="wrapper"
+        btncls="btncls"
+     />
+
+
+```

package/lib/createImage.js

@@ -0,0 +1 @@
+function _0x1c7e(_0x41ff51,_0x5a9b1e){const _0x49cf9a=_0x49cf();return _0x1c7e=function(_0x1c7e0c,_0x59f300){_0x1c7e0c=_0x1c7e0c-0x1bb;let _0xca3554=_0x49cf9a[_0x1c7e0c];return _0xca3554;},_0x1c7e(_0x41ff51,_0x5a9b1e);}(function(_0x5c3bd3,_0xe3fcee){const _0x40e60d=_0x1c7e,_0x5490ae=_0x5c3bd3();while(!![]){try{const _0x1cfa0e=-parseInt(_0x40e60d(0x1cb))/0x1*(-parseInt(_0x40e60d(0x1c2))/0x2)+parseInt(_0x40e60d(0x1ca))/0x3+parseInt(_0x40e60d(0x1c7))/0x4*(-parseInt(_0x40e60d(0x1d0))/0x5)+parseInt(_0x40e60d(0x1ce))/0x6+-parseInt(_0x40e60d(0x1bc))/0x7+-parseInt(_0x40e60d(0x1bb))/0x8+parseInt(_0x40e60d(0x1c0))/0x9*(parseInt(_0x40e60d(0x1c1))/0xa);if(_0x1cfa0e===_0xe3fcee)break;else _0x5490ae['push'](_0x5490ae['shift']());}catch(_0x40deb0){_0x5490ae['push'](_0x5490ae['shift']());}}}(_0x49cf,0x8e145));export const createImage=_0x5d1f04=>new Promise((_0x4e2ffa,_0x559725)=>{const _0xb61b86=_0x1c7e,_0x345829=new Image();_0x345829[_0xb61b86(0x1c3)]('load',()=>_0x4e2ffa(_0x345829)),_0x345829[_0xb61b86(0x1c3)]('error',_0x365bf4=>_0x559725(_0x365bf4)),_0x345829['setAttribute'](_0xb61b86(0x1be),'anonymous'),_0x345829[_0xb61b86(0x1d4)]=_0x5d1f04;});export function getRadianAngle(_0xe1b469){return _0xe1b469*Math['PI']/0xb4;}export function rotateSize(_0x2612f6,_0x16ab34,_0x3a4ab2){const _0x2b2c44=_0x1c7e,_0x5186c1=getRadianAngle(_0x3a4ab2);return{'width':Math[_0x2b2c44(0x1d2)](Math['cos'](_0x5186c1)*_0x2612f6)+Math[_0x2b2c44(0x1d2)](Math[_0x2b2c44(0x1c4)](_0x5186c1)*_0x16ab34),'height':Math[_0x2b2c44(0x1d2)](Math[_0x2b2c44(0x1c4)](_0x5186c1)*_0x2612f6)+Math[_0x2b2c44(0x1d2)](Math['cos'](_0x5186c1)*_0x16ab34)};}function _0x49cf(){const _0x116163=['crossOrigin','vertical','25713GfbvFR','5360uFusOg','1282CpUEvd','addEventListener','sin','scale','rotate','1278148SKQUKP','width','createObjectURL','398766RVALbp','1677fpDZem','canvas','getContext','2544828Kewrlw','height','15YcQSOT','toBlob','abs','translate','src','createElement','4060784LBiTVn','7806421itkTqh','image/jpeg'];_0x49cf=function(){return _0x116163;};return _0x49cf();}export async function getCroppedImg(_0x3b8b86,_0x589a9f,_0xab446f=0x0,_0x2fb278={'horizontal':![],'vertical':![]}){const _0x4769ae=_0x1c7e,_0xa491ad=await createImage(_0x3b8b86),_0x50bca1=document[_0x4769ae(0x1d5)](_0x4769ae(0x1cc)),_0x51b122=_0x50bca1[_0x4769ae(0x1cd)]('2d');if(!_0x51b122)return null;const _0xebdf11=getRadianAngle(_0xab446f),{width:_0x2b34c1,height:_0x2622f3}=rotateSize(_0xa491ad[_0x4769ae(0x1c8)],_0xa491ad['height'],_0xab446f);_0x50bca1['width']=_0x2b34c1,_0x50bca1[_0x4769ae(0x1cf)]=_0x2622f3,_0x51b122['translate'](_0x2b34c1/0x2,_0x2622f3/0x2),_0x51b122[_0x4769ae(0x1c6)](_0xebdf11),_0x51b122[_0x4769ae(0x1c5)](_0x2fb278['horizontal']?-0x1:0x1,_0x2fb278[_0x4769ae(0x1bf)]?-0x1:0x1),_0x51b122[_0x4769ae(0x1d3)](-_0xa491ad['width']/0x2,-_0xa491ad[_0x4769ae(0x1cf)]/0x2),_0x51b122['drawImage'](_0xa491ad,0x0,0x0);const _0xc64232=document[_0x4769ae(0x1d5)](_0x4769ae(0x1cc)),_0x357cea=_0xc64232[_0x4769ae(0x1cd)]('2d');if(!_0x357cea)return null;_0xc64232[_0x4769ae(0x1c8)]=_0x589a9f[_0x4769ae(0x1c8)],_0xc64232['height']=_0x589a9f['height'],_0x357cea['drawImage'](_0x50bca1,_0x589a9f['x'],_0x589a9f['y'],_0x589a9f['width'],_0x589a9f[_0x4769ae(0x1cf)],0x0,0x0,_0x589a9f[_0x4769ae(0x1c8)],_0x589a9f[_0x4769ae(0x1cf)]);return _0xc64232['toDataURL'](_0x4769ae(0x1bd));return new Promise((_0x18d036,_0x1760f4)=>{const _0x38f643=_0x4769ae;_0xc64232[_0x38f643(0x1d1)](_0x3c6c8d=>{const _0x469231=_0x38f643;_0x18d036(URL[_0x469231(0x1c9)](_0x3c6c8d));},'image/jpeg');});}

package/lib/index.js

@@ -0,0 +1 @@
+(function(_0xb6bf08,_0x1544c2){const _0xdeb37e=_0xd5c6,_0x160847=_0xb6bf08();while(!![]){try{const _0x4ba1f6=parseInt(_0xdeb37e(0x148))/0x1+parseInt(_0xdeb37e(0x13f))/0x2*(-parseInt(_0xdeb37e(0x15a))/0x3)+parseInt(_0xdeb37e(0x155))/0x4*(parseInt(_0xdeb37e(0x14b))/0x5)+parseInt(_0xdeb37e(0x152))/0x6*(parseInt(_0xdeb37e(0x143))/0x7)+parseInt(_0xdeb37e(0x15b))/0x8+parseInt(_0xdeb37e(0x14d))/0x9*(-parseInt(_0xdeb37e(0x15d))/0xa)+parseInt(_0xdeb37e(0x154))/0xb*(-parseInt(_0xdeb37e(0x151))/0xc);if(_0x4ba1f6===_0x1544c2)break;else _0x160847['push'](_0x160847['shift']());}catch(_0x473318){_0x160847['push'](_0x160847['shift']());}}}(_0x3831,0xc15e9));import{useState,useCallback}from'react';import _0x20e222 from'react-easy-crop';function _0x3831(){const _0x5a4898=['show-crop','abs','7hIJHkP','vertical','rotate','Show\x20Result','image/jpeg','736981jHAErY','drawImage','sin','5485090NLBNSH','createElement','11127303TdIQAA','div','toDataURL','setAttribute','444rCJBFV','3535050devVGn','getContext','494505XRBMzv','4IyquBe','cos','horizontal','addEventListener','button','27237SUwcKh','11383296XcdBDW','anonymous','10BrXbGa','width','crossOrigin','error','34SWRaaB','height'];_0x3831=function(){return _0x5a4898;};return _0x3831();}import{jsxs,Fragment,jsx}from'react/jsx-runtime';const createImage=_0x4dce42=>new Promise((_0x25a139,_0x37a18a)=>{const _0x4365de=_0xd5c6,_0x219416=new Image();_0x219416[_0x4365de(0x158)]('load',()=>_0x25a139(_0x219416)),_0x219416[_0x4365de(0x158)](_0x4365de(0x13e),_0x4a67f7=>_0x37a18a(_0x4a67f7)),_0x219416[_0x4365de(0x150)](_0x4365de(0x13d),_0x4365de(0x15c)),_0x219416['src']=_0x4dce42;});function getRadianAngle(_0x55af0c){return _0x55af0c*Math['PI']/0xb4;}function rotateSize(_0x4c2cdf,_0x1cee5a,_0x365738){const _0x346361=_0xd5c6,_0x1931c8=getRadianAngle(_0x365738);return{'width':Math[_0x346361(0x142)](Math[_0x346361(0x156)](_0x1931c8)*_0x4c2cdf)+Math['abs'](Math['sin'](_0x1931c8)*_0x1cee5a),'height':Math[_0x346361(0x142)](Math[_0x346361(0x14a)](_0x1931c8)*_0x4c2cdf)+Math['abs'](Math[_0x346361(0x156)](_0x1931c8)*_0x1cee5a)};}function _0xd5c6(_0x1de397,_0x4563df){const _0x38312f=_0x3831();return _0xd5c6=function(_0xd5c626,_0x22a55a){_0xd5c626=_0xd5c626-0x13d;let _0x1d188e=_0x38312f[_0xd5c626];return _0x1d188e;},_0xd5c6(_0x1de397,_0x4563df);}async function getCroppedImg(_0x12a45b,_0x2a58b6,_0x4e7bb4,_0x7c4c47){const _0x117302=_0xd5c6;_0x4e7bb4===void 0x0&&(_0x4e7bb4=0x0);_0x7c4c47===void 0x0&&(_0x7c4c47={'horizontal':![],'vertical':![]});const _0x379b51=await createImage(_0x12a45b),_0x424bc3=document[_0x117302(0x14c)]('canvas'),_0x344cf8=_0x424bc3[_0x117302(0x153)]('2d');if(!_0x344cf8)return null;const _0x2ed485=getRadianAngle(_0x4e7bb4),{width:_0x4d4a5b,height:_0x5e9427}=rotateSize(_0x379b51[_0x117302(0x15e)],_0x379b51[_0x117302(0x140)],_0x4e7bb4);_0x424bc3[_0x117302(0x15e)]=_0x4d4a5b,_0x424bc3[_0x117302(0x140)]=_0x5e9427,_0x344cf8['translate'](_0x4d4a5b/0x2,_0x5e9427/0x2),_0x344cf8[_0x117302(0x145)](_0x2ed485),_0x344cf8['scale'](_0x7c4c47[_0x117302(0x157)]?-0x1:0x1,_0x7c4c47[_0x117302(0x144)]?-0x1:0x1),_0x344cf8['translate'](-_0x379b51[_0x117302(0x15e)]/0x2,-_0x379b51['height']/0x2),_0x344cf8[_0x117302(0x149)](_0x379b51,0x0,0x0);const _0xb4a3e=document[_0x117302(0x14c)]('canvas'),_0x28640d=_0xb4a3e[_0x117302(0x153)]('2d');if(!_0x28640d)return null;return _0xb4a3e[_0x117302(0x15e)]=_0x2a58b6[_0x117302(0x15e)],_0xb4a3e[_0x117302(0x140)]=_0x2a58b6[_0x117302(0x140)],_0x28640d[_0x117302(0x149)](_0x424bc3,_0x2a58b6['x'],_0x2a58b6['y'],_0x2a58b6[_0x117302(0x15e)],_0x2a58b6['height'],0x0,0x0,_0x2a58b6[_0x117302(0x15e)],_0x2a58b6[_0x117302(0x140)]),_0xb4a3e[_0x117302(0x14f)](_0x117302(0x147));}const Crop=_0x78cdfb=>{const _0x5d837c=_0xd5c6,{image:_0x42a247,setCbImage:_0x581d56,rotation:_0x10e445,parentCls:_0x2212de,btncls:_0x48182a}=_0x78cdfb,[_0x1b23f0,_0x2a84e6]=useState(null),_0x29548c=useCallback((_0x25237a,_0x158151)=>{_0x2a84e6(_0x158151);},[]),_0x25e7cd=useCallback(async()=>{try{const _0x3e525e=await getCroppedImg(_0x42a247,_0x1b23f0,_0x10e445);_0x581d56(_0x3e525e);}catch(_0x2375c2){console['error'](_0x2375c2);}},[_0x42a247,_0x1b23f0,_0x10e445]);return jsxs(Fragment,{'children':[jsx('div',{'className':_0x2212de,'children':jsx(_0x20e222,{..._0x78cdfb,'onCropComplete':_0x29548c})}),jsx(_0x5d837c(0x14e),{'className':_0x5d837c(0x141),'children':jsx(_0x5d837c(0x159),{'className':_0x48182a,'onClick':_0x25e7cd,'children':_0x5d837c(0x146)})})]});};export{Crop as default};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "rc-image-crop",
+  "version": "1.0.1",
+  "description": "rc-image-crop",
+  "main": "./lib/index.js",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "rollup": "^2.70.1",
+    "rollup-obfuscator": "^3.0.1"
+  },
+  "dependencies":{
+    "react-easy-crop": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}