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

1// @lizychy0329/we-cropper
2import { fileToBase64, useCropper } from '@lizychy0329/we-cropper'
3
4const { showCropper, onCrop } = useCropper({
5  el: '#demoContainer', // default: document.body
6  aspectRatio: 1 / 1,
7  loadingText: '加载中...',
8  resetText: '还原',
9  confirmText: '确定',
10  cancelText: '取消',
11})
12
13// @vueuse/core
14const { open, onChange } = useFileDialog({
15  multiple: false,
16  accept: 'image/*'
17})
18
19// start
20const cropedImage = ref('')
21onChange(async (files) => {
22  const base64String = await fileToBase64(files[0])
23  showCropper(base64String)
24})
25
26onCrop((base64String) => {
27  cropedImage.value = base64String
28
29  // upload you cropedImage to OSS...
30})

Screenshot

Typescript

1/**
2 * @description: base64 to blob
3 * @param base64String
4 */
5export declare function base64ToBlob(base64String: string): Promise<Blob>;
6
7/**
8 * @description: blob to base64
9 * @param file
10 */
11export declare function fileToBase64(file: File): Promise<string>;
12
13/**
14 * @description: url to base64
15 * @param url
16 * @param mineType 'image/png'
17 */
18export declare function urlToBase64(url: string, mineType?: string): Promise<string>;
19
20export declare function useCropper(options?: UseCropperOptions): {
21    onCrop: EventHookOn<any>;
22    showCropper: (src: string) => void;
23};
24
25declare type UseCropperOptions = Omit<WeCropperOptions, 'src'>;
26
27declare interface WeCropperOptions {
28    /**
29     * A base64string created from File
30     *
31     * @remarks Can use utils/fileToBase64 methods to transform
32     */
33    src: string;
34    /**
35     * Like teleport API in Vue3
36     *
37     * @default document.body
38     */
39    el?: HTMLElement | string
40    /**
41     * Cropper box aspect-ratio controll
42     *
43     * @default 1 / 1
44     */
45    aspectRatio?: number;
46
47    /**
48     * loading text
49     *
50     * @default Loading...
51     */
52    loadingText?: string
53
54    /**
55     * reset button text
56     *
57     * @default Reset
58     */
59    resetText?: string
60
61    /**
62     * confirm button text
63     *
64     * @default Confirm
65     */
66    confirmText?: string
67
68    /**
69     * cancel button text
70     *
71     * @default Cancel
72     */
73    cancelText?: string
74}
75
76export { }

Local Dev

dev：pnpm dev

build：pnpm build:lib

docs build:docs