chore: add crop

YuzeTT · Nov 14, 2023 · 039f733 · 039f733
1 parent 16139f0
commit 039f733
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 130 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "antd": "^5.11.1",
     "antd-img-crop": "^4.17.0",
     "axios": "^1.6.1",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.11.10",
     "detect-browser": "^5.3.0",
     "downloadjs": "^1.4.7",
@@ -27,6 +28,7 @@
     "pinyin-pro": "^3.17.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
     "react-router": "^6.18.0",
     "react-router-dom": "^6.18.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -89,7 +89,7 @@ export default function index() {
           <div p-4  cursor-pointer rounded-xl decoration-none relative overflow-hidden className='z-0 card hover:bg-zinc-50 transition' key={key} onClick={()=>{jumpBefore(item.url)}}>
             <div className='z-20'>
               <div flex='~ items-start justify-between'>
-                <div className='w-25 h-10 bg-contain bg-cover bg-left bg-no-repeat' text='center' style={{backgroundImage: `url(${item.logo})`}} />
+                <div className='w-25 h-10 bg-contain bg-contain bg-left bg-no-repeat' text='center' style={{backgroundImage: `url(${item.logo})`}} />
                 {item.tag?
                   <div className='px-1 py-0.5 text-xs rounded absolute right-2 top-2' style={{backgroundColor: item.tag_color[0], color: item.tag_color[1]}}>{item.tag}</div>
                   :''
@@ -110,7 +110,7 @@ export default function index() {
         {list.todo.map((item, key)=>(
           <div p-4 className='card hover:bg-zinc-50 transition' rounded-xl decoration-none key={key} >
             <div flex='~ items-start justify-between'>
-              <div className='w-25 h-10 bg-contain bg-cover bg-left bg-no-repeat' text='center' style={{backgroundImage: `url(${item.logo})`}} />
+              <div className='w-25 h-10 bg-contain bg-contain bg-left bg-no-repeat' text='center' style={{backgroundImage: `url(${item.logo})`}} />
             </div>
             <div className='mt-6' text='xl zinc-700'>{item.name[0]}</div>
             <div text='sm zinc-500'>{item.name[1]}</div>

diff --git a/src/pages/tools/instagram.tsx b/src/pages/tools/instagram.tsx
@@ -83,7 +83,7 @@ export default function Instagram() {
             <tbody>
               <tr>
                 <td className='h-full w-full relative overflow-hidden'>
-                  <div className='h-full w-full bg-center bg-contain bg-cover bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image})`, transform: `translate(${imageX}%,${imageY}%) scale(${imageZoom-30}%)`}}>
+                  <div className='h-full w-full bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image})`, transform: `translate(${imageX}%,${imageY}%) scale(${imageZoom-30}%)`}}>
                   </div>
                   <div className='h-35 w-45 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2' style={{border:'20px solid #00000050'}}></div>
                   <div className='text-[0.7rem] text-white absolute top-[1px] left-1/2 transform -translate-x-1/2'>裁剪区</div>
@@ -143,7 +143,7 @@ export default function Instagram() {
             <div className='bg-gradient-to-rt from-[#FCCE10] via-[#FA0C65] to-[#D009B9] p-[1px] rounded-full'>
               <div className='bg-white rounded-full p-[1px]'>
                 {head?
-                <div className='w-4.5 h-4.5 rounded-full bg-center bg-cover bg-no-repeat ' style={{backgroundImage: `url(${head})`}} />:
+                <div className='w-4.5 h-4.5 rounded-full bg-center bg-cover! bg-no-repeat ' style={{backgroundImage: `url(${head})`}} />:
                 <div className='w-4.5 h-4.5 rounded-full bg-zinc-50' />
                 }
               </div>
@@ -155,7 +155,7 @@ export default function Instagram() {
           </div>
           {image?
             <div className='h-full w-full overflow-hidden'>
-              <div className='h-full w-full bg-center bg-contain bg-cover bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image})`, transform: `translate(${imageX}%,${imageY}%) scale(${imageZoom}%)`}}></div>
+              <div className='h-full w-full bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image})`, transform: `translate(${imageX}%,${imageY}%) scale(${imageZoom}%)`}}></div>
             </div>:
             <div className='w-full h-full bg-zinc-50 flex items-center justify-center text-zinc-500'>请上传图片</div>
           }