vue-cropperjs2 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +154 -3
- package/package.json +10 -10
- package/dist/index.d.ts +0 -138
- package/dist/index.js +0 -1622
- package/dist/index.umd.cjs +0 -1
- package/dist/user-5.png +0 -0
- package/dist/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,156 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vue-cropperjs2
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern Vue 3 wrapper for [Cropper.js v2](https://github.com/fengyuanchen/cropperjs) using Web Components. This library provides a seamless way to integrate Cropper.js v2 features directly into your Vue 3 applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Features
|
|
6
|
+
- Fully compatible with Vue 3 (Composition API / `<script setup>`)
|
|
7
|
+
- Wraps all standard `cropperjs` Web Components as native Vue components
|
|
8
|
+
- Full TypeScript support
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
Install `vue-cropperjs2` alongside its peer dependency `cropperjs`:
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install vue-cropperjs2 cropperjs
|
|
16
|
+
# or using yarn
|
|
17
|
+
yarn add vue-cropperjs2 cropperjs
|
|
18
|
+
# or using pnpm
|
|
19
|
+
pnpm add vue-cropperjs2 cropperjs
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Available Components
|
|
23
|
+
|
|
24
|
+
The library exports the following components mapping to `cropperjs` custom elements:
|
|
25
|
+
|
|
26
|
+
- `CropperCanvas`
|
|
27
|
+
- `CropperImage`
|
|
28
|
+
- `CropperShade`
|
|
29
|
+
- `CropperHandle`
|
|
30
|
+
- `CropperSelection`
|
|
31
|
+
- `CropperCrosshair`
|
|
32
|
+
- `CropperGrid`
|
|
33
|
+
- `CropperViewer`
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
### 1. Global Registration (Optional)
|
|
38
|
+
|
|
39
|
+
If you want to make all components available globally throughout your application without needing to import them in every file, register the library as a plugin in your main entry file (e.g. `main.ts`):
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { createApp } from "vue";
|
|
43
|
+
import App from "./App.vue";
|
|
44
|
+
import VueCropperJs from "vue-cropperjs2";
|
|
45
|
+
|
|
46
|
+
const app = createApp(App);
|
|
47
|
+
|
|
48
|
+
// Registers all cropper components globally
|
|
49
|
+
app.use(VueCropperJs);
|
|
50
|
+
|
|
51
|
+
app.mount("#app");
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 2. Local Usage / `<script setup>`
|
|
55
|
+
|
|
56
|
+
If you prefer to import components locally, you can import them directly from `vue-cropperjs2`.
|
|
57
|
+
|
|
58
|
+
Here is a full example of a basic image cropping interface:
|
|
59
|
+
|
|
60
|
+
```vue
|
|
61
|
+
<script setup lang="ts">
|
|
62
|
+
import { useTemplateRef } from "vue";
|
|
63
|
+
import {
|
|
64
|
+
CropperCanvas,
|
|
65
|
+
CropperImage,
|
|
66
|
+
CropperShade,
|
|
67
|
+
CropperHandle,
|
|
68
|
+
CropperSelection,
|
|
69
|
+
CropperGrid,
|
|
70
|
+
CropperCrosshair,
|
|
71
|
+
CropperViewer
|
|
72
|
+
} from "vue-cropperjs2";
|
|
73
|
+
|
|
74
|
+
// Access the selection component to trigger cropping actions
|
|
75
|
+
const selectionRef = useTemplateRef("selectionRef");
|
|
76
|
+
const target = useTemplateRef("target");
|
|
77
|
+
|
|
78
|
+
const onChange = (e: Event) => {
|
|
79
|
+
console.log("Selection changed", e);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const toCanvas = async () => {
|
|
83
|
+
// Extract the cropped image canvas and append it to the DOM
|
|
84
|
+
if (selectionRef.value?.selection) {
|
|
85
|
+
const canvas = await selectionRef.value.selection.$toCanvas();
|
|
86
|
+
target.value?.appendChild(canvas);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<template>
|
|
92
|
+
<!-- Main Cropping Area -->
|
|
93
|
+
<CropperCanvas :background="true">
|
|
94
|
+
<CropperImage
|
|
95
|
+
src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
|
|
96
|
+
alt="Picture"
|
|
97
|
+
:rotatable="true"
|
|
98
|
+
:scalable="true"
|
|
99
|
+
:skewable="true"
|
|
100
|
+
:translatable="true"
|
|
101
|
+
/>
|
|
102
|
+
<CropperShade :hidden="true" />
|
|
103
|
+
<CropperHandle action="select" :plain="true" />
|
|
104
|
+
<CropperSelection
|
|
105
|
+
id="Sel"
|
|
106
|
+
:movable="true"
|
|
107
|
+
:resizable="true"
|
|
108
|
+
:initial-coverage="0.5"
|
|
109
|
+
:aspect-ratio="1"
|
|
110
|
+
@change="onChange"
|
|
111
|
+
ref="selectionRef"
|
|
112
|
+
>
|
|
113
|
+
<CropperGrid role="grid" :covered="true" />
|
|
114
|
+
<CropperCrosshair :centered="true" />
|
|
115
|
+
<CropperHandle action="move" theme-color="rgba(255, 255, 255, 0.1)" />
|
|
116
|
+
|
|
117
|
+
<!-- Resize Handles -->
|
|
118
|
+
<CropperHandle action="n-resize" />
|
|
119
|
+
<CropperHandle action="e-resize" />
|
|
120
|
+
<CropperHandle action="s-resize" />
|
|
121
|
+
<CropperHandle action="w-resize" />
|
|
122
|
+
<CropperHandle action="ne-resize" />
|
|
123
|
+
<CropperHandle action="nw-resize" />
|
|
124
|
+
<CropperHandle action="se-resize" />
|
|
125
|
+
<CropperHandle action="sw-resize" />
|
|
126
|
+
</CropperSelection>
|
|
127
|
+
</CropperCanvas>
|
|
128
|
+
|
|
129
|
+
<div class="actions">
|
|
130
|
+
<!-- Preview Viewer -->
|
|
131
|
+
<CropperViewer selection="#Sel" style="width: 200px; height: 200px;" />
|
|
132
|
+
|
|
133
|
+
<!-- Action Button -->
|
|
134
|
+
<button @click="toCanvas">Get Cropped Image</button>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<!-- Container for the exported cropped image -->
|
|
138
|
+
<div ref="target" />
|
|
139
|
+
</template>
|
|
140
|
+
|
|
141
|
+
<style scoped>
|
|
142
|
+
.actions {
|
|
143
|
+
display: flex;
|
|
144
|
+
gap: 20px;
|
|
145
|
+
align-items: flex-start;
|
|
146
|
+
margin-top: 20px;
|
|
147
|
+
}
|
|
148
|
+
</style>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Props and Events
|
|
152
|
+
Because `vue-cropperjs2` components are direct wrappers over Cropper.js Web Components, all native properties and events of Cropper.js v2 are supported. Please refer to the [official Cropper.js v2 documentation](https://github.com/fengyuanchen/cropperjs) for a complete list of properties, methods, and events for each element.
|
|
153
|
+
|
|
154
|
+
## License
|
|
155
|
+
|
|
156
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-cropperjs2",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
"preview": "vite preview"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"cropperjs": "^2.
|
|
24
|
-
"vue": "^3.5.
|
|
23
|
+
"cropperjs": "^2.1.1",
|
|
24
|
+
"vue": "^3.5.39"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@vitejs/plugin-vue": "^
|
|
28
|
-
"@vue/tsconfig": "^0.
|
|
29
|
-
"typescript": "~
|
|
30
|
-
"vite": "^
|
|
31
|
-
"vite-plugin-dts": "^
|
|
32
|
-
"vue-tsc": "^
|
|
27
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
28
|
+
"@vue/tsconfig": "^0.9.1",
|
|
29
|
+
"typescript": "~6.0.3",
|
|
30
|
+
"vite": "^8.1.3",
|
|
31
|
+
"vite-plugin-dts": "^5.0.3",
|
|
32
|
+
"vue-tsc": "^3.3.6"
|
|
33
33
|
}
|
|
34
|
-
}
|
|
34
|
+
}
|
package/dist/index.d.ts
DELETED
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import { App } from 'vue';
|
|
2
|
-
import { ComponentOptionsMixin } from 'vue';
|
|
3
|
-
import { ComponentProvideOptions } from 'vue';
|
|
4
|
-
import { DefineComponent } from 'vue';
|
|
5
|
-
import { PublicProps } from 'vue';
|
|
6
|
-
|
|
7
|
-
declare const __VLS_component: DefineComponent<CropperCanvasProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperCanvasProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
8
|
-
|
|
9
|
-
declare const __VLS_component_2: DefineComponent<SelectionProperty, {
|
|
10
|
-
selection: any;
|
|
11
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectionProperty> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
12
|
-
sel: unknown;
|
|
13
|
-
}, any>;
|
|
14
|
-
|
|
15
|
-
declare type __VLS_Props = {
|
|
16
|
-
resize?: "both" | "horizontal" | "vertical" | "none";
|
|
17
|
-
selection?: string;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
declare function __VLS_template(): {
|
|
21
|
-
attrs: Partial<{}>;
|
|
22
|
-
slots: {
|
|
23
|
-
default?(_: {}): any;
|
|
24
|
-
};
|
|
25
|
-
refs: {};
|
|
26
|
-
rootEl: any;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
declare function __VLS_template_2(): {
|
|
30
|
-
attrs: Partial<{}>;
|
|
31
|
-
slots: {
|
|
32
|
-
default?(_: {}): any;
|
|
33
|
-
};
|
|
34
|
-
refs: {
|
|
35
|
-
sel: unknown;
|
|
36
|
-
};
|
|
37
|
-
rootEl: any;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
41
|
-
|
|
42
|
-
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
43
|
-
|
|
44
|
-
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
45
|
-
new (): {
|
|
46
|
-
$slots: S;
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
51
|
-
new (): {
|
|
52
|
-
$slots: S;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
declare type CanvasImageProps = {
|
|
57
|
-
src: string;
|
|
58
|
-
alt?: string;
|
|
59
|
-
initialCenterSize?: "contain" | "cover";
|
|
60
|
-
rotatable?: boolean;
|
|
61
|
-
scalable?: boolean;
|
|
62
|
-
skewable?: boolean;
|
|
63
|
-
slottable?: boolean;
|
|
64
|
-
translatable?: boolean;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
export declare const CropperCanvas: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
68
|
-
|
|
69
|
-
declare type CropperCanvasProps = {
|
|
70
|
-
background?: boolean;
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export declare const CropperCrosshair: DefineComponent<CropperCrosshairProperty, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperCrosshairProperty> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
74
|
-
|
|
75
|
-
declare type CropperCrosshairProperty = {
|
|
76
|
-
centered: boolean;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
export declare const CropperGrid: DefineComponent<CropperGridProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperGridProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
80
|
-
|
|
81
|
-
declare type CropperGridProps = {
|
|
82
|
-
role?: "grid";
|
|
83
|
-
covered?: boolean;
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
export declare const CropperHandle: DefineComponent<CropperHandleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
87
|
-
|
|
88
|
-
declare type CropperHandleProps = {
|
|
89
|
-
action?: HandleAction;
|
|
90
|
-
plain?: boolean;
|
|
91
|
-
slottable?: boolean;
|
|
92
|
-
themeColor?: string;
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
export declare const CropperImage: DefineComponent<CanvasImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CanvasImageProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
96
|
-
|
|
97
|
-
export declare const CropperSelection: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
|
|
98
|
-
|
|
99
|
-
export declare const CropperShade: DefineComponent<CropperShadeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperShadeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
100
|
-
|
|
101
|
-
declare type CropperShadeProps = {
|
|
102
|
-
x?: number;
|
|
103
|
-
y?: number;
|
|
104
|
-
width?: number;
|
|
105
|
-
height?: number;
|
|
106
|
-
slottable?: boolean;
|
|
107
|
-
themeColor?: string;
|
|
108
|
-
hidden?: boolean;
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
export declare const CropperViewer: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
112
|
-
|
|
113
|
-
declare const _default: {
|
|
114
|
-
install: (app: App) => void;
|
|
115
|
-
};
|
|
116
|
-
export default _default;
|
|
117
|
-
|
|
118
|
-
declare type HandleAction = "select" | "move" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "none";
|
|
119
|
-
|
|
120
|
-
declare type SelectionProperty = {
|
|
121
|
-
x?: number;
|
|
122
|
-
y?: number;
|
|
123
|
-
width?: number;
|
|
124
|
-
height?: number;
|
|
125
|
-
aspectRatio?: number;
|
|
126
|
-
initialAspectRatio?: number;
|
|
127
|
-
initialCoverage?: number;
|
|
128
|
-
dynamic?: boolean;
|
|
129
|
-
movable?: boolean;
|
|
130
|
-
resizable?: boolean;
|
|
131
|
-
zoomable?: boolean;
|
|
132
|
-
multiple?: boolean;
|
|
133
|
-
keyboard?: boolean;
|
|
134
|
-
outlined?: boolean;
|
|
135
|
-
precise?: boolean;
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export { }
|