feat: 完成效果

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/deploy-to-pages.yml

@@ -0,0 +1,22 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Install and Build 🔧 
+        run: |
+          npm install
+          npm run build:playground
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.3.0
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: playground/dist # The folder the action should deploy.

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,2 +1,40 @@
 # react-image-cropper
+
 A image cropper component for React
+
+[Live Demo](https://mengdu.github.io/react-image-cropper/)
+
+## Usage
+
+```sh
+npm install @lanyue/react-image-cropper
+```
+
+```jsx
+import { useState } from 'react'
+import { ColorPicker } from '@lanyue/react-image-cropper'
+import '@lanyue/react-image-cropper/dist/style.css'
+
+export default function App() {
+  const [img, setImg] = useState('/demo.png')
+  const [blob, setBlob] = useState<Blob | null>()
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files && e.target.files[0]
+    if (!file) return
+    if (!/^image\/.+$/.test(file.type)) return
+    setImg(URL.createObjectURL(file))
+  }
+  return (
+    <>
+      <input type="file" onChange={handleFile} />
+      <ImageCropper
+        src={img}
+        size={{w: 128, h: 128}}
+        style={{width: '300px', height: '300px'}}
+        onComplete={e => setBlob(e.blob)}
+      />
+      {blob && <img src={URL.createObjectURL(blob)} alt="" />}
+    </>
+  )
+}
+```

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@lanyue/react-image-cropper",
+  "version": "0.1.0",
+  "description": "A image cropper component for React",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mengdu/react-image-cropper.git"
+  },
+  "keywords": [
+    "react-image-cropper"
+  ],
+  "author": "lanyueos@qq.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mengdu/react-image-cropper/issues"
+  },
+  "homepage": "https://github.com/mengdu/react-image-cropper#readme",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite playground",
+    "build": "tsc && vite build",
+    "build:playground": "vite build playground",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite playground preview"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "less": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.7.3"
+  }
+}

playground/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>A Image cropper component for React.</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

playground/src/App.tsx

@@ -0,0 +1,48 @@
+// import { useState } from 'react'
+import { useState } from 'react'
+import { ImageCropper } from '../../src'
+
+function App() {
+  const [img, setImg] = useState('/demo.png')
+  const [blob, setBlob] = useState<Blob | null>()
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files && e.target.files[0]
+    if (!file) return
+    if (!/^image\/.+$/.test(file.type)) return
+    setImg(URL.createObjectURL(file))
+  }
+  return (
+    <div className="app">
+      <div>
+        <h1 className="title">React Image Cropper</h1>
+        <p className="des">A image cropper component for React.</p>
+        <div>
+          <a href="https://github.com/mengdu/react-image-cropper" target="_blank" className="button">
+            <svg className="icon" role="presentation">
+            <title>GitHub</title>
+            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+                          C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
+                          c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
+                          c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
+                          c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
+                          c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
+            </svg>
+            Star on GitHub
+          </a>
+        </div>
+      </div>
+      <div className="playground">
+        <div>
+          <input type="file" onChange={handleFile} />
+          <p></p>
+          <ImageCropper src={img} size={{w: 128, h: 128}} style={{width: '300px', height: '300px'}} onComplete={e => {setBlob(e.blob);console.log(e)}}/>
+        </div>
+        <div>
+          {blob && <img src={URL.createObjectURL(blob)} alt="" />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App

playground/src/main.less

@@ -0,0 +1,82 @@
+:root {
+  color: #4a5764;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  background: linear-gradient(to left top, #e0f6ff, #f5fcff);
+  background-attachment: fixed;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.app {
+  margin: 0 auto;
+  width: 800px;
+  display: flex;
+  background-color: #fff;
+  border: solid 1px rgba(0, 0, 0, 0.092);
+  padding: 50px;
+  border-radius: 5px;
+
+  .title {
+    color: #00b2ff;
+    font-size: 40px;
+    font-weight: 600;
+  }
+
+  .button {
+    margin-top: 40px;
+    display: inline-block;
+    --shadow-color: 0deg 0% 20%;
+    background-color: #00b2ff;
+    background-image: linear-gradient(0deg, #0000, #ffffff0d);
+    border: 1px solid #00a1e6;
+    box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / .05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / .06), 0 2.8px 3.4px -2px hsl(var(--shadow-color) / .07);
+    color: #fff;
+    font-weight: 600;
+    padding: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    text-decoration: none;
+    text-shadow: 0 1px 1px #0000001a;
+    transition: all .2s ease;
+    border-radius: 10px;
+
+    &:hover {
+      background: #19baff;
+      border-color: #009adb;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+  }
+
+  .playground {
+    flex: 1 auto;
+    padding: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    gap: 15px;
+  }
+}

playground/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './main.less'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

playground/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

playground/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

playground/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

playground/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+})