https://github.com/lizychy0329/we-cropper
A simple WeChat-style image cropper, implemented with vue-advanced-cropper.
https://github.com/lizychy0329/we-cropper
cropper tailwindcss typescript vue vue3 wechat
Last synced: 4 months ago
JSON representation
A simple WeChat-style image cropper, implemented with vue-advanced-cropper.
- Host: GitHub
- URL: https://github.com/lizychy0329/we-cropper
- Owner: lizyChy0329
- License: mit
- Created: 2024-08-05T09:15:44.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-29T02:05:49.000Z (8 months ago)
- Last Synced: 2025-01-30T18:39:29.823Z (5 months ago)
- Topics: cropper, tailwindcss, typescript, vue, vue3, wechat
- Language: Vue
- Homepage: https://lizychy0329.github.io/we-cropper/
- Size: 2.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
we-cropper
⚡️ A simple WeChat-style image cropper, implemented with vue-advanced-cropper.
## Feature
- ✨ Easy to use: only one core `useCropper`
- 🚀 Fixed cropping box
- 🎯 Automatically zoom-in on the crop area
- ❄️ ESM / UMD support
- 🦾 Typescript support
## peerDependencies
"vue": "^3.0.0"
## Install
`pnpm i @lizychy0329/we-cropper`
## Usage
```javascript
// @lizychy0329/we-cropper
import { fileToBase64, useCropper } from '@lizychy0329/we-cropper'
const { showCropper, onCrop } = useCropper({
el: '#demoContainer', // default: document.body
aspectRatio: 1 / 1,
loadingText: '加载中...',
resetText: '还原',
confirmText: '确定',
cancelText: '取消',
})
// @vueuse/core
const { open, onChange } = useFileDialog({
multiple: false,
accept: 'image/*'
})
// start
const cropedImage = ref('')
onChange(async (files) => {
const base64String = await fileToBase64(files[0])
showCropper(base64String)
})
onCrop((base64String) => {
cropedImage.value = base64String
// upload you cropedImage to OSS...
})
```
## Screenshot
## Typescript
```Typescript
/**
* @description: base64 to blob
* @param base64String
*/
export declare function base64ToBlob(base64String: string): Promise;
/**
* @description: blob to base64
* @param file
*/
export declare function fileToBase64(file: File): Promise;
/**
* @description: url to base64
* @param url
* @param mineType 'image/png'
*/
export declare function urlToBase64(url: string, mineType?: string): Promise;
export declare function useCropper(options?: UseCropperOptions): {
onCrop: EventHookOn;
showCropper: (src: string) => void;
};
declare type UseCropperOptions = Omit;
declare interface WeCropperOptions {
/**
* A base64string created from File
*
* @remarks Can use utils/fileToBase64 methods to transform
*/
src: string;
/**
* Like teleport API in Vue3
*
* @default document.body
*/
el?: HTMLElement | string
/**
* Cropper box aspect-ratio controll
*
* @default 1 / 1
*/
aspectRatio?: number;
/**
* loading text
*
* @default Loading...
*/
loadingText?: string
/**
* reset button text
*
* @default Reset
*/
resetText?: string
/**
* confirm button text
*
* @default Confirm
*/
confirmText?: string
/**
* cancel button text
*
* @default Cancel
*/
cancelText?: string
}
export { }
```
## Local Dev
dev：pnpm dev
build：pnpm build:lib
docs build:docs