├── .eslintrc.cjs
├── .github
    └── workflows
    │   ├── gh-pages.yml
    │   └── npm_publish.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .vscode
    └── extensions.json
├── LICENSE
├── README.md
├── dist
    ├── index.d.ts
    ├── index.es.js
    ├── index.umd.js
    └── shims-vue.d.ts
├── example
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── .prettierignore
    ├── .prettierrc
    ├── .vscode
    │   └── extensions.json
    ├── demo
    │   ├── assets
    │   │   ├── demo-d54cd5f0.jpg
    │   │   ├── index-987b8e67.js
    │   │   └── index-eb952961.css
    │   └── index.html
    ├── env.d.ts
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── CanvasModal.vue
    │   ├── assets
    │   │   ├── app.css
    │   │   └── demo.jpg
    │   └── main.ts
    ├── tsconfig.config.json
    ├── tsconfig.json
    └── vite.config.ts
├── package-lock.json
├── package.json
├── src
    ├── VueCropper.vue
    ├── index.ts
    ├── shims-vue.d.ts
    └── types.ts
├── tsconfig.config.json
├── tsconfig.json
└── vite.config.ts


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 |   "root": true,
 6 |   "extends": [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/eslint-config-typescript/recommended",
10 |     "@vue/eslint-config-prettier"
11 |   ],
12 |   "env": {
13 |     "vue/setup-compiler-macros": true
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: github pages
 2 | 
 3 | # on 是 Actions 的触发条件，这里的配置说明当 master 分支有提交的时候，根据这个配置文件执行
 4 | on:
 5 |   push:
 6 |     branches:
 7 |       - master # Set a branch to deploy
 8 | 
 9 | # jobs 是要执行的任务，我们看到他要执行 deploy
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest # 运行环境
13 |     steps: # 执行步骤
14 | 
15 |       # checkout 分支
16 |       - uses: actions/checkout@v3
17 |       - run: cp -r example/demo .temp
18 | 
19 |       - uses: actions/checkout@v3
20 |         with:
21 |           ref: gh-pages
22 |           clean: false
23 | 
24 |       - run: cp -rf .temp/* .
25 |       - run: rm -r .temp
26 |       - run: git config user.name "${{ github.actor }}"
27 |       - run: git config user.email "${{ github.actor }}@users.noreply.github.com"
28 |       - run: git add --all
29 |       - run: git commit --message "${{ github.ref_name }}"
30 |       - run: git push
31 | 


--------------------------------------------------------------------------------
/.github/workflows/npm_publish.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   push:
 3 |     tags:
 4 |     - '*'
 5 | 
 6 | jobs:
 7 |   publish:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v3
11 |       - uses: actions/setup-node@v3
12 |         with:
13 |           node-version: 16
14 |       - run: npm install
15 |       - uses: JS-DevTools/npm-publish@v1
16 |         with:
17 |           token: ${{ secrets.NPM_ACCESS_TOKEN }}
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist-ssr
13 | coverage
14 | *.local
15 | 
16 | /cypress/videos/
17 | /cypress/screenshots/
18 | 
19 | # Editor directories and files
20 | .vscode/*
21 | !.vscode/extensions.json
22 | .idea
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | /dist/*
2 | .local
3 | /node_modules/**
4 | /example/src/assets/*
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | semi: false # 语句末尾是否加分号
2 | singleQuote: true # 使用单引号代替双引号
3 | printWidth: 100 # 超过多长进行换行
4 | trailingComma: 'none' # 多行输入的尾逗号是否添加
5 | arrowParens: 'avoid' # (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
6 | endOfLine: 'lf' # 格式化换行符，默认值 lf
7 | # vueIndentScriptAndStyle: true # vue script 标签的缩进开启
8 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Hccake
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-cropper
  2 | 
  3 | A Vue image cropper components by cropperjs.
  4 | 
  5 | Github: https://github.com/ballcat-projects/vue-cropper
  6 | 
  7 | ## Demo
  8 | 
  9 | online demo: https://ballcat-projects.github.io/vue-cropper
 10 | 
 11 | You can also clone the repository and run the demo locally:
 12 | 
 13 | ```shell
 14 | # clone
 15 | git clone https://github.com/ballcat-projects/vue-cropper.git
 16 | 
 17 | # enter the folder
 18 | cd vue-cropper/example
 19 | 
 20 | # install dependency
 21 | npm install
 22 | 
 23 | # run it
 24 | npm run dev
 25 | ```
 26 | 
 27 | ## Getting started
 28 | 
 29 | ### Installation
 30 | 
 31 | ```npm
 32 | npm install @ballcat/vue-cropper
 33 | ```
 34 | or
 35 | ```yarn
 36 | yarn add @ballcat/vue-cropper
 37 | ```
 38 | 
 39 | ### Usage
 40 | 
 41 | #### Global Registration
 42 | 
 43 | ```vue
 44 | import { createApp } from 'vue';
 45 | import App from './App';
 46 | 
 47 | import VueCropper from '@ballcat/vue-cropper';
 48 | import 'cropperjs/dist/cropper.css';
 49 | 
 50 | const app = createApp(App);
 51 | 
 52 | app.use(VueCropper).mount('#app');
 53 | ```
 54 | 
 55 | #### Local Registration
 56 | 
 57 | ```vue
 58 | <template>
 59 |   <vue-cropper 
 60 |       ref="vueCropperRef"
 61 |       :src="imgSrc"
 62 |       alt="Source Image"
 63 |   />
 64 | </template>
 65 | <script>
 66 | import {ref, onMounted} from 'vue'
 67 | import VueCropper from '@ballcat/vue-cropper';
 68 | import 'cropperjs/dist/cropper.css';
 69 | 
 70 | export default {
 71 |   components: {
 72 |     VueCropper,
 73 |   },
 74 |   setup() {
 75 |     const imgSrc = ref('the image path')
 76 |     const vueCropperRef = ref(null);
 77 | 
 78 |     onMounted(() => {
 79 |       console.log(vueCropperRef.value.getData());
 80 |     });
 81 | 
 82 |     return {
 83 |       imgSrc,
 84 |       vueCropperRef
 85 |     };
 86 |   }
 87 | };
 88 | </script>
 89 | ```
 90 | 
 91 | or use setup script
 92 | 
 93 | ```vue
 94 | <script setup>
 95 | import {ref, onMounted} from 'vue'
 96 | import VueCropper from '@ballcat/vue-cropper';
 97 | import 'cropperjs/dist/cropper.css';
 98 | 
 99 | const imgSrc = ref('the image path')
100 | const vueCropperRef = ref(null);
101 | 
102 | onMounted(() => {
103 |   console.log(vueCropperRef.value.getData());
104 | });
105 | </script>
106 | ```
107 | 
108 | ## API
109 | 
110 | VueCropper props that can be used are divided into two parts, custom and all properties supported by cropperjs
111 | 
112 | ### custom options
113 | 
114 | | Property       | Description                                 | Type    | Required |
115 | | :------------- | :------------------------------------------ | :------ | :------- |
116 | | src            | origin image src                            | string  | true     |
117 | | imgStyle       | the img element style                       | object  | --       |
118 | | imgCrossOrigin | the img element crossOrigin attribute value | string  | --       |
119 | | alt            | the img element alt attribute value         | boolean | --       |
120 | 
121 | ### Cropperjs options
122 | 
123 | see [cropperjs document](https://github.com/fengyuanchen/cropperjs/blob/main/README.md)
124 | 
125 | 
126 | ### custom expose method
127 | 
128 | | Method  | Description                   | Type       |
129 | |:--------|:------------------------------|:-----------|
130 | | flipX   | flip the picture horizontally | () => void |
131 | | flipY   | flip the picture vertically   | () => void |
132 | 


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
  1 | import type { AllowedComponentProps } from 'vue';
  2 | import type { ComponentCustomProps } from 'vue';
  3 | import type { ComponentOptionsMixin } from 'vue';
  4 | import { default as Cropper_2 } from 'cropperjs';
  5 | import type { CSSProperties } from 'vue';
  6 | import type { DefineComponent } from 'vue';
  7 | import type { ExtractPropTypes } from 'vue';
  8 | import type { PropType } from 'vue';
  9 | import type { Ref } from 'vue';
 10 | import type { VNodeProps } from 'vue';
 11 | 
 12 | declare const _sfc_main: DefineComponent<{
 13 |     src: {
 14 |         type: StringConstructor;
 15 |         required: true;
 16 |     };
 17 |     alt: {
 18 |         type: StringConstructor;
 19 |         default: string;
 20 |     };
 21 |     imgStyle: {
 22 |         type: PropType<CSSProperties>;
 23 |         default: () => {};
 24 |     };
 25 |     imgCrossOrigin: {
 26 |         type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
 27 |         default: undefined;
 28 |     };
 29 |     viewMode: {
 30 |         type: PropType<Cropper_2.ViewMode>;
 31 |         default: number;
 32 |     };
 33 |     dragMode: {
 34 |         type: PropType<Cropper_2.DragMode>;
 35 |         default: string;
 36 |     };
 37 |     initialAspectRatio: {
 38 |         type: NumberConstructor;
 39 |         default: number;
 40 |     };
 41 |     aspectRatio: {
 42 |         type: NumberConstructor;
 43 |         default: number;
 44 |     };
 45 |     data: {
 46 |         type: PropType<Cropper_2.SetDataOptions>;
 47 |         default: undefined;
 48 |     };
 49 |     preview: {
 50 |         type: PropType<string | HTMLElement | HTMLElement[] | NodeListOf<HTMLElement> | undefined>;
 51 |         default: string;
 52 |     };
 53 |     responsive: {
 54 |         type: BooleanConstructor;
 55 |         default: boolean;
 56 |     };
 57 |     restore: {
 58 |         type: BooleanConstructor;
 59 |         default: boolean;
 60 |     };
 61 |     checkCrossOrigin: {
 62 |         type: BooleanConstructor;
 63 |         default: boolean;
 64 |     };
 65 |     checkOrientation: {
 66 |         type: BooleanConstructor;
 67 |         default: boolean;
 68 |     };
 69 |     modal: {
 70 |         type: BooleanConstructor;
 71 |         default: boolean;
 72 |     };
 73 |     guides: {
 74 |         type: BooleanConstructor;
 75 |         default: boolean;
 76 |     };
 77 |     center: {
 78 |         type: BooleanConstructor;
 79 |         default: boolean;
 80 |     };
 81 |     highlight: {
 82 |         type: BooleanConstructor;
 83 |         default: boolean;
 84 |     };
 85 |     background: {
 86 |         type: BooleanConstructor;
 87 |         default: boolean;
 88 |     };
 89 |     autoCrop: {
 90 |         type: BooleanConstructor;
 91 |         default: boolean;
 92 |     };
 93 |     autoCropArea: {
 94 |         type: NumberConstructor;
 95 |         default: number;
 96 |     };
 97 |     movable: {
 98 |         type: BooleanConstructor;
 99 |         default: boolean;
100 |     };
101 |     rotatable: {
102 |         type: BooleanConstructor;
103 |         default: boolean;
104 |     };
105 |     scalable: {
106 |         type: BooleanConstructor;
107 |         default: boolean;
108 |     };
109 |     zoomable: {
110 |         type: BooleanConstructor;
111 |         default: boolean;
112 |     };
113 |     zoomOnTouch: {
114 |         type: BooleanConstructor;
115 |         default: boolean;
116 |     };
117 |     zoomOnWheel: {
118 |         type: BooleanConstructor;
119 |         default: boolean;
120 |     };
121 |     wheelZoomRatio: {
122 |         type: NumberConstructor;
123 |         default: number;
124 |     };
125 |     cropBoxMovable: {
126 |         type: BooleanConstructor;
127 |         default: boolean;
128 |     };
129 |     cropBoxResizable: {
130 |         type: BooleanConstructor;
131 |         default: boolean;
132 |     };
133 |     toggleDragModeOnDblclick: {
134 |         type: BooleanConstructor;
135 |         default: boolean;
136 |     };
137 |     minCanvasWidth: {
138 |         type: NumberConstructor;
139 |         default: number;
140 |     };
141 |     minCanvasHeight: {
142 |         type: NumberConstructor;
143 |         default: number;
144 |     };
145 |     minCropBoxWidth: {
146 |         type: NumberConstructor;
147 |         default: number;
148 |     };
149 |     minCropBoxHeight: {
150 |         type: NumberConstructor;
151 |         default: number;
152 |     };
153 |     minContainerWidth: {
154 |         type: NumberConstructor;
155 |         default: number;
156 |     };
157 |     minContainerHeight: {
158 |         type: NumberConstructor;
159 |         default: number;
160 |     };
161 |     ready: {
162 |         type: PropType<(event: Cropper_2.ReadyEvent<EventTarget>) => void>;
163 |         default: undefined;
164 |     };
165 |     cropstart: {
166 |         type: PropType<(event: Cropper_2.CropStartEvent) => void>;
167 |         default: undefined;
168 |     };
169 |     cropmove: {
170 |         type: PropType<(event: Cropper_2.CropMoveEvent) => void>;
171 |         default: undefined;
172 |     };
173 |     cropend: {
174 |         type: PropType<(event: Cropper_2.CropEndEvent) => void>;
175 |         default: undefined;
176 |     };
177 |     crop: {
178 |         type: PropType<(event: Cropper_2.CropEvent) => void>;
179 |         default: undefined;
180 |     };
181 |     zoom: {
182 |         type: PropType<(event: Cropper_2.ZoomEvent) => void>;
183 |         default: undefined;
184 |     };
185 | }, {
186 |     imageStyle: {
187 |         display: string;
188 |         maxWidth: string;
189 |     };
190 |     props: any;
191 |     imageRef: Ref<any>;
192 |     cropper: Cropper_2 | undefined;
193 |     initCropper: () => void;
194 | }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
195 |     src: {
196 |         type: StringConstructor;
197 |         required: true;
198 |     };
199 |     alt: {
200 |         type: StringConstructor;
201 |         default: string;
202 |     };
203 |     imgStyle: {
204 |         type: PropType<CSSProperties>;
205 |         default: () => {};
206 |     };
207 |     imgCrossOrigin: {
208 |         type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
209 |         default: undefined;
210 |     };
211 |     viewMode: {
212 |         type: PropType<Cropper_2.ViewMode>;
213 |         default: number;
214 |     };
215 |     dragMode: {
216 |         type: PropType<Cropper_2.DragMode>;
217 |         default: string;
218 |     };
219 |     initialAspectRatio: {
220 |         type: NumberConstructor;
221 |         default: number;
222 |     };
223 |     aspectRatio: {
224 |         type: NumberConstructor;
225 |         default: number;
226 |     };
227 |     data: {
228 |         type: PropType<Cropper_2.SetDataOptions>;
229 |         default: undefined;
230 |     };
231 |     preview: {
232 |         type: PropType<string | HTMLElement | HTMLElement[] | NodeListOf<HTMLElement> | undefined>;
233 |         default: string;
234 |     };
235 |     responsive: {
236 |         type: BooleanConstructor;
237 |         default: boolean;
238 |     };
239 |     restore: {
240 |         type: BooleanConstructor;
241 |         default: boolean;
242 |     };
243 |     checkCrossOrigin: {
244 |         type: BooleanConstructor;
245 |         default: boolean;
246 |     };
247 |     checkOrientation: {
248 |         type: BooleanConstructor;
249 |         default: boolean;
250 |     };
251 |     modal: {
252 |         type: BooleanConstructor;
253 |         default: boolean;
254 |     };
255 |     guides: {
256 |         type: BooleanConstructor;
257 |         default: boolean;
258 |     };
259 |     center: {
260 |         type: BooleanConstructor;
261 |         default: boolean;
262 |     };
263 |     highlight: {
264 |         type: BooleanConstructor;
265 |         default: boolean;
266 |     };
267 |     background: {
268 |         type: BooleanConstructor;
269 |         default: boolean;
270 |     };
271 |     autoCrop: {
272 |         type: BooleanConstructor;
273 |         default: boolean;
274 |     };
275 |     autoCropArea: {
276 |         type: NumberConstructor;
277 |         default: number;
278 |     };
279 |     movable: {
280 |         type: BooleanConstructor;
281 |         default: boolean;
282 |     };
283 |     rotatable: {
284 |         type: BooleanConstructor;
285 |         default: boolean;
286 |     };
287 |     scalable: {
288 |         type: BooleanConstructor;
289 |         default: boolean;
290 |     };
291 |     zoomable: {
292 |         type: BooleanConstructor;
293 |         default: boolean;
294 |     };
295 |     zoomOnTouch: {
296 |         type: BooleanConstructor;
297 |         default: boolean;
298 |     };
299 |     zoomOnWheel: {
300 |         type: BooleanConstructor;
301 |         default: boolean;
302 |     };
303 |     wheelZoomRatio: {
304 |         type: NumberConstructor;
305 |         default: number;
306 |     };
307 |     cropBoxMovable: {
308 |         type: BooleanConstructor;
309 |         default: boolean;
310 |     };
311 |     cropBoxResizable: {
312 |         type: BooleanConstructor;
313 |         default: boolean;
314 |     };
315 |     toggleDragModeOnDblclick: {
316 |         type: BooleanConstructor;
317 |         default: boolean;
318 |     };
319 |     minCanvasWidth: {
320 |         type: NumberConstructor;
321 |         default: number;
322 |     };
323 |     minCanvasHeight: {
324 |         type: NumberConstructor;
325 |         default: number;
326 |     };
327 |     minCropBoxWidth: {
328 |         type: NumberConstructor;
329 |         default: number;
330 |     };
331 |     minCropBoxHeight: {
332 |         type: NumberConstructor;
333 |         default: number;
334 |     };
335 |     minContainerWidth: {
336 |         type: NumberConstructor;
337 |         default: number;
338 |     };
339 |     minContainerHeight: {
340 |         type: NumberConstructor;
341 |         default: number;
342 |     };
343 |     ready: {
344 |         type: PropType<(event: Cropper_2.ReadyEvent<EventTarget>) => void>;
345 |         default: undefined;
346 |     };
347 |     cropstart: {
348 |         type: PropType<(event: Cropper_2.CropStartEvent) => void>;
349 |         default: undefined;
350 |     };
351 |     cropmove: {
352 |         type: PropType<(event: Cropper_2.CropMoveEvent) => void>;
353 |         default: undefined;
354 |     };
355 |     cropend: {
356 |         type: PropType<(event: Cropper_2.CropEndEvent) => void>;
357 |         default: undefined;
358 |     };
359 |     crop: {
360 |         type: PropType<(event: Cropper_2.CropEvent) => void>;
361 |         default: undefined;
362 |     };
363 |     zoom: {
364 |         type: PropType<(event: Cropper_2.ZoomEvent) => void>;
365 |         default: undefined;
366 |     };
367 | }>>, {
368 |     crop: (event: Cropper_2.CropEvent) => void;
369 |     preview: string | HTMLElement | HTMLElement[] | NodeListOf<HTMLElement> | undefined;
370 |     alt: string;
371 |     imgStyle: CSSProperties;
372 |     imgCrossOrigin: "" | "anonymous" | "use-credentials" | undefined;
373 |     viewMode: Cropper_2.ViewMode;
374 |     dragMode: Cropper_2.DragMode;
375 |     initialAspectRatio: number;
376 |     aspectRatio: number;
377 |     data: Cropper_2.SetDataOptions;
378 |     responsive: boolean;
379 |     restore: boolean;
380 |     checkCrossOrigin: boolean;
381 |     checkOrientation: boolean;
382 |     modal: boolean;
383 |     guides: boolean;
384 |     center: boolean;
385 |     highlight: boolean;
386 |     background: boolean;
387 |     autoCrop: boolean;
388 |     autoCropArea: number;
389 |     movable: boolean;
390 |     rotatable: boolean;
391 |     scalable: boolean;
392 |     zoomable: boolean;
393 |     zoomOnTouch: boolean;
394 |     zoomOnWheel: boolean;
395 |     wheelZoomRatio: number;
396 |     cropBoxMovable: boolean;
397 |     cropBoxResizable: boolean;
398 |     toggleDragModeOnDblclick: boolean;
399 |     minCanvasWidth: number;
400 |     minCanvasHeight: number;
401 |     minCropBoxWidth: number;
402 |     minCropBoxHeight: number;
403 |     minContainerWidth: number;
404 |     minContainerHeight: number;
405 |     ready: (event: Cropper_2.ReadyEvent<EventTarget>) => void;
406 |     cropstart: (event: Cropper_2.CropStartEvent) => void;
407 |     cropmove: (event: Cropper_2.CropMoveEvent) => void;
408 |     cropend: (event: Cropper_2.CropEndEvent) => void;
409 |     zoom: (event: Cropper_2.ZoomEvent) => void;
410 | }>;
411 | export default _sfc_main;
412 | 
413 | export declare interface VueCropperInstance {
414 |     clear(): Cropper_2;
415 |     crop(): Cropper_2;
416 |     destroy(): Cropper_2;
417 |     disable(): Cropper_2;
418 |     enable(): Cropper_2;
419 |     getCanvasData(): Cropper_2.CanvasData;
420 |     getContainerData(): Cropper_2.ContainerData;
421 |     getCropBoxData(): Cropper_2.CropBoxData;
422 |     getCroppedCanvas(options?: Cropper_2.GetCroppedCanvasOptions): HTMLCanvasElement;
423 |     getData(rounded?: boolean): Cropper_2.Data;
424 |     getImageData(): Cropper_2.ImageData;
425 |     move(offsetX: number, offsetY?: number): Cropper_2;
426 |     moveTo(x: number, y?: number): Cropper_2;
427 |     replace(url: string, onlyColorChanged?: boolean): Cropper_2;
428 |     reset(): Cropper_2;
429 |     rotate(degree: number): Cropper_2;
430 |     rotateTo(degree: number): Cropper_2;
431 |     scale(scaleX: number, scaleY?: number): Cropper_2;
432 |     scaleX(scaleX: number): Cropper_2;
433 |     scaleY(scaleY: number): Cropper_2;
434 |     setAspectRatio(aspectRatio: number): Cropper_2;
435 |     setCanvasData(data: Cropper_2.SetCanvasDataOptions): Cropper_2;
436 |     setCropBoxData(data: Cropper_2.SetCropBoxDataOptions): Cropper_2;
437 |     setData(data: Cropper_2.SetDataOptions): Cropper_2;
438 |     setDragMode(dragMode: Cropper_2.DragMode): Cropper_2;
439 |     zoom(ratio: number): Cropper_2;
440 |     zoomTo(ratio: number, pivot?: {
441 |         x: number;
442 |         y: number;
443 |     }): Cropper_2;
444 |     flipX(): void;
445 |     flipY(): void;
446 | }
447 | 
448 | export { }
449 | 


--------------------------------------------------------------------------------
/dist/index.es.js:
--------------------------------------------------------------------------------
  1 | import { defineComponent as s, ref as r, onMounted as f, watch as m, nextTick as y, openBlock as g, createElementBlock as v, createElementVNode as B, normalizeStyle as C, toRaw as b } from "vue";
  2 | import D from "cropperjs";
  3 | const h = ["src", "alt", "crossorigin"], x = /* @__PURE__ */ s({
  4 |   __name: "VueCropper",
  5 |   props: {
  6 |     // custom props
  7 |     src: {
  8 |       type: String,
  9 |       required: !0
 10 |     },
 11 |     alt: {
 12 |       type: String,
 13 |       default: "image"
 14 |     },
 15 |     imgStyle: {
 16 |       type: Object,
 17 |       default: () => ({})
 18 |     },
 19 |     imgCrossOrigin: {
 20 |       type: String,
 21 |       default: void 0
 22 |     },
 23 |     // ========= CropperJS options =======
 24 |     // Define the view mode of the cropper
 25 |     viewMode: {
 26 |       type: Number,
 27 |       // 0, 1, 2, 3
 28 |       default: 0
 29 |     },
 30 |     // Define the dragging mode of the cropper
 31 |     dragMode: {
 32 |       type: String,
 33 |       // 'crop', 'move' or 'none'
 34 |       default: "crop"
 35 |     },
 36 |     // Define the initial aspect ratio of the crop box
 37 |     initialAspectRatio: {
 38 |       type: Number,
 39 |       default: NaN
 40 |     },
 41 |     // Define the aspect ratio of the crop box
 42 |     aspectRatio: {
 43 |       type: Number,
 44 |       default: NaN
 45 |     },
 46 |     // An object with the previous cropping result data
 47 |     data: {
 48 |       type: Object,
 49 |       default: void 0
 50 |     },
 51 |     // A selector for adding extra containers to preview
 52 |     preview: {
 53 |       type: [String, Array, Object],
 54 |       default: ""
 55 |     },
 56 |     // Re-render the cropper when resize the window
 57 |     responsive: {
 58 |       type: Boolean,
 59 |       default: !0
 60 |     },
 61 |     // Restore the cropped area after resize the window
 62 |     restore: {
 63 |       type: Boolean,
 64 |       default: !0
 65 |     },
 66 |     // Check if the current image is a cross-origin image
 67 |     checkCrossOrigin: {
 68 |       type: Boolean,
 69 |       default: !0
 70 |     },
 71 |     // Check the current image's Exif Orientation information
 72 |     checkOrientation: {
 73 |       type: Boolean,
 74 |       default: !0
 75 |     },
 76 |     // Show the black modal
 77 |     modal: {
 78 |       type: Boolean,
 79 |       default: !0
 80 |     },
 81 |     // Show the dashed lines for guiding
 82 |     guides: {
 83 |       type: Boolean,
 84 |       default: !0
 85 |     },
 86 |     // Show the center indicator for guiding
 87 |     center: {
 88 |       type: Boolean,
 89 |       default: !0
 90 |     },
 91 |     // Show the white modal to highlight the crop box
 92 |     highlight: {
 93 |       type: Boolean,
 94 |       default: !0
 95 |     },
 96 |     // Show the grid background
 97 |     background: {
 98 |       type: Boolean,
 99 |       default: !0
100 |     },
101 |     // Enable to crop the image automatically when initialize
102 |     autoCrop: {
103 |       type: Boolean,
104 |       default: !0
105 |     },
106 |     // Define the percentage of automatic cropping area when initializes
107 |     autoCropArea: {
108 |       type: Number,
109 |       default: 0.8
110 |     },
111 |     // Enable to move the image
112 |     movable: {
113 |       type: Boolean,
114 |       default: !0
115 |     },
116 |     // Enable to rotate the image
117 |     rotatable: {
118 |       type: Boolean,
119 |       default: !0
120 |     },
121 |     // Enable to scale the image
122 |     scalable: {
123 |       type: Boolean,
124 |       default: !0
125 |     },
126 |     // Enable to zoom the image
127 |     zoomable: {
128 |       type: Boolean,
129 |       default: !0
130 |     },
131 |     // Enable to zoom the image by dragging touch
132 |     zoomOnTouch: {
133 |       type: Boolean,
134 |       default: !0
135 |     },
136 |     // Enable to zoom the image by wheeling mouse
137 |     zoomOnWheel: {
138 |       type: Boolean,
139 |       default: !0
140 |     },
141 |     // Define zoom ratio when zoom the image by wheeling mouse
142 |     wheelZoomRatio: {
143 |       type: Number,
144 |       default: 0.1
145 |     },
146 |     // Enable to move the crop box
147 |     cropBoxMovable: {
148 |       type: Boolean,
149 |       default: !0
150 |     },
151 |     // Enable to resize the crop box
152 |     cropBoxResizable: {
153 |       type: Boolean,
154 |       default: !0
155 |     },
156 |     // Toggle drag mode between "crop" and "move" when click twice on the cropper
157 |     toggleDragModeOnDblclick: {
158 |       type: Boolean,
159 |       default: !0
160 |     },
161 |     // Size limitation
162 |     minCanvasWidth: {
163 |       type: Number,
164 |       default: 0
165 |     },
166 |     minCanvasHeight: {
167 |       type: Number,
168 |       default: 0
169 |     },
170 |     minCropBoxWidth: {
171 |       type: Number,
172 |       default: 0
173 |     },
174 |     minCropBoxHeight: {
175 |       type: Number,
176 |       default: 0
177 |     },
178 |     minContainerWidth: {
179 |       type: Number,
180 |       default: 200
181 |     },
182 |     minContainerHeight: {
183 |       type: Number,
184 |       default: 100
185 |     },
186 |     // Shortcuts of events
187 |     ready: {
188 |       type: Function,
189 |       default: void 0
190 |     },
191 |     cropstart: {
192 |       type: Function,
193 |       default: void 0
194 |     },
195 |     cropmove: {
196 |       type: Function,
197 |       default: void 0
198 |     },
199 |     cropend: {
200 |       type: Function,
201 |       default: void 0
202 |     },
203 |     crop: {
204 |       type: Function,
205 |       default: void 0
206 |     },
207 |     zoom: {
208 |       type: Function,
209 |       default: void 0
210 |     }
211 |   },
212 |   setup(o, { expose: i }) {
213 |     const n = o, d = {
214 |       display: "block",
215 |       /* This rule is very important, please don't ignore this */
216 |       maxWidth: "100%"
217 |     }, u = r();
218 |     let e;
219 |     function l() {
220 |       n.src ? e = new D(u.value, b(n)) : e = void 0;
221 |     }
222 |     return f(l), m(
223 |       () => n,
224 |       () => {
225 |         e == null || e.destroy(), y(l);
226 |       },
227 |       { deep: !0 }
228 |     ), i({
229 |       // Clear the crop box
230 |       clear() {
231 |         return e == null ? void 0 : e.clear();
232 |       },
233 |       // Show the crop box manually
234 |       crop() {
235 |         return e == null ? void 0 : e.crop();
236 |       },
237 |       /**
238 |        * Destroy the cropper and remove the instance from the image
239 |        * @returns {Cropper} this
240 |        */
241 |       destroy() {
242 |         return e == null ? void 0 : e.destroy();
243 |       },
244 |       // Disable (freeze) the cropper
245 |       disable() {
246 |         return e == null ? void 0 : e.disable();
247 |       },
248 |       // Enable (unfreeze) the cropper
249 |       enable() {
250 |         return e == null ? void 0 : e.enable();
251 |       },
252 |       /**
253 |        * Get the canvas position and size data.
254 |        * @returns {Object} The result canvas data.
255 |        */
256 |       getCanvasData() {
257 |         return e == null ? void 0 : e.getCanvasData();
258 |       },
259 |       /**
260 |        * Get the container size data.
261 |        * @returns {Object} The result container data.
262 |        */
263 |       getContainerData() {
264 |         return e == null ? void 0 : e.getContainerData();
265 |       },
266 |       /**
267 |        * Get the crop box position and size data.
268 |        * @returns {Object} The result crop box data.
269 |        */
270 |       getCropBoxData() {
271 |         return e == null ? void 0 : e.getCropBoxData();
272 |       },
273 |       /**
274 |        * Get a canvas drawn the cropped image.
275 |        * @param {Object} [options={}] - The config options.
276 |        * @returns {HTMLCanvasElement} - The result canvas.
277 |        */
278 |       getCroppedCanvas(t) {
279 |         return e == null ? void 0 : e.getCroppedCanvas(t);
280 |       },
281 |       /**
282 |        * Get the cropped area position and size data (base on the original image)
283 |        * @param {boolean} [rounded=false] - Indicate if round the data values or not.
284 |        * @returns {Object} The result cropped data.
285 |        */
286 |       getData(t) {
287 |         return e == null ? void 0 : e.getData(t);
288 |       },
289 |       /**
290 |        * Get the image position and size data.
291 |        * @returns {Object} The result image data.
292 |        */
293 |       getImageData() {
294 |         return e == null ? void 0 : e.getImageData();
295 |       },
296 |       /**
297 |        * Move the canvas with relative offsets
298 |        * @param {number} offsetX - The relative offset distance on the x-axis.
299 |        * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis.
300 |        * @returns {Cropper} this
301 |        */
302 |       move(t, a) {
303 |         return e == null ? void 0 : e.move(t, a);
304 |       },
305 |       /**
306 |        * Move the canvas to an absolute point
307 |        * @param {number} x - The x-axis coordinate.
308 |        * @param {number} [y=x] - The y-axis coordinate.
309 |        * @returns {Cropper} this
310 |        */
311 |       moveTo(t, a) {
312 |         return e == null ? void 0 : e.moveTo(t, a);
313 |       },
314 |       /**
315 |        * Replace the image's src and rebuild the cropper
316 |        * @param {string} url - The new URL.
317 |        * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.
318 |        * @returns {Cropper} this
319 |        */
320 |       replace(t, a) {
321 |         return e == null ? void 0 : e.replace(t, a);
322 |       },
323 |       // Reset the image and crop box to their initial states
324 |       reset() {
325 |         return e == null ? void 0 : e.reset();
326 |       },
327 |       /**
328 |        * Rotate the canvas with a relative degree
329 |        * @param {number} degree - The rotate degree.
330 |        * @returns {Cropper} this
331 |        */
332 |       rotate(t) {
333 |         return e == null ? void 0 : e.rotate(t);
334 |       },
335 |       /**
336 |        * Rotate the canvas to an absolute degree
337 |        * @param {number} degree - The rotate degree.
338 |        * @returns {Cropper} this
339 |        */
340 |       rotateTo(t) {
341 |         return e == null ? void 0 : e.rotateTo(t);
342 |       },
343 |       /**
344 |        * Scale the image
345 |        * @param {number} scaleX - The scale ratio on the x-axis.
346 |        * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
347 |        * @returns {Cropper} this
348 |        */
349 |       scale(t, a) {
350 |         return e == null ? void 0 : e.scale(t, a);
351 |       },
352 |       /**
353 |        * Scale the image on the x-axis.
354 |        * @param {number} scaleX - The scale ratio on the x-axis.
355 |        * @returns {Cropper} this
356 |        */
357 |       scaleX(t) {
358 |         return e == null ? void 0 : e.scaleX(t);
359 |       },
360 |       /**
361 |        * Scale the image on the y-axis.
362 |        * @param {number} scaleY - The scale ratio on the y-axis.
363 |        * @returns {Cropper} this
364 |        */
365 |       scaleY(t) {
366 |         return e == null ? void 0 : e.scaleY(t);
367 |       },
368 |       /**
369 |        * Change the aspect ratio of the crop box.
370 |        * @param {number} aspectRatio - The new aspect ratio.
371 |        * @returns {Cropper} this
372 |        */
373 |       setAspectRatio(t) {
374 |         return e == null ? void 0 : e.setAspectRatio(t);
375 |       },
376 |       /**
377 |        * Set the canvas position and size with new data.
378 |        * @param {Object} data - The new canvas data.
379 |        * @returns {Cropper} this
380 |        */
381 |       setCanvasData(t) {
382 |         return e == null ? void 0 : e.setCanvasData(t);
383 |       },
384 |       /**
385 |        * Set the crop box position and size with new data.
386 |        * @param {Object} data - The new crop box data.
387 |        * @returns {Cropper} this
388 |        */
389 |       setCropBoxData(t) {
390 |         return e == null ? void 0 : e.setCropBoxData(t);
391 |       },
392 |       /**
393 |        * Set the cropped area position and size with new data
394 |        * @param {Object} data - The new data.
395 |        * @returns {Cropper} this
396 |        */
397 |       setData(t) {
398 |         return e == null ? void 0 : e.setData(t);
399 |       },
400 |       /**
401 |        * Change the drag mode.
402 |        * @param {string} dragMode - The new drag mode.
403 |        * @returns {Cropper} this
404 |        */
405 |       setDragMode(t) {
406 |         return e == null ? void 0 : e.setDragMode(t);
407 |       },
408 |       /**
409 |        * Zoom the canvas with a relative ratio
410 |        * @param {number} ratio - The target ratio.
411 |        * @returns {Cropper} this
412 |        */
413 |       zoom(t) {
414 |         return e == null ? void 0 : e.zoom(t);
415 |       },
416 |       /**
417 |        * Zoom the canvas to an absolute ratio
418 |        * @param {number} ratio - The target ratio.
419 |        * @param {Object} pivot - The zoom pivot point coordinate.
420 |        * @returns {Cropper} this
421 |        */
422 |       zoomTo(t, a) {
423 |         return e == null ? void 0 : e.zoomTo(t, a);
424 |       },
425 |       /**
426 |        * flip the image horizontally
427 |        */
428 |       flipX() {
429 |         if (e) {
430 |           const { scaleX: t } = e.getData();
431 |           e.scaleX(-t);
432 |         }
433 |       },
434 |       /**
435 |        * flip the image vertically
436 |        */
437 |       flipY() {
438 |         if (e) {
439 |           const { scaleY: t } = e.getData();
440 |           e.scaleY(-t);
441 |         }
442 |       }
443 |     }), (t, a) => (g(), v("div", null, [
444 |       B("img", {
445 |         ref_key: "imageRef",
446 |         ref: u,
447 |         src: n.src,
448 |         alt: n.alt,
449 |         crossorigin: o.imgCrossOrigin,
450 |         style: C([d, n.imgStyle])
451 |       }, null, 12, h)
452 |     ]));
453 |   }
454 | });
455 | export {
456 |   x as default
457 | };
458 | 


--------------------------------------------------------------------------------
/dist/index.umd.js:
--------------------------------------------------------------------------------
1 | (function(a,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue"),require("cropperjs")):typeof define=="function"&&define.amd?define(["vue","cropperjs"],u):(a=typeof globalThis<"u"?globalThis:a||self,a.VueCropper=u(a.Vue,a.CropperJs))})(this,function(a,u){"use strict";const s=["src","alt","crossorigin"];return a.defineComponent({__name:"VueCropper",props:{src:{type:String,required:!0},alt:{type:String,default:"image"},imgStyle:{type:Object,default:()=>({})},imgCrossOrigin:{type:String,default:void 0},viewMode:{type:Number,default:0},dragMode:{type:String,default:"crop"},initialAspectRatio:{type:Number,default:NaN},aspectRatio:{type:Number,default:NaN},data:{type:Object,default:void 0},preview:{type:[String,Array,Object],default:""},responsive:{type:Boolean,default:!0},restore:{type:Boolean,default:!0},checkCrossOrigin:{type:Boolean,default:!0},checkOrientation:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},guides:{type:Boolean,default:!0},center:{type:Boolean,default:!0},highlight:{type:Boolean,default:!0},background:{type:Boolean,default:!0},autoCrop:{type:Boolean,default:!0},autoCropArea:{type:Number,default:.8},movable:{type:Boolean,default:!0},rotatable:{type:Boolean,default:!0},scalable:{type:Boolean,default:!0},zoomable:{type:Boolean,default:!0},zoomOnTouch:{type:Boolean,default:!0},zoomOnWheel:{type:Boolean,default:!0},wheelZoomRatio:{type:Number,default:.1},cropBoxMovable:{type:Boolean,default:!0},cropBoxResizable:{type:Boolean,default:!0},toggleDragModeOnDblclick:{type:Boolean,default:!0},minCanvasWidth:{type:Number,default:0},minCanvasHeight:{type:Number,default:0},minCropBoxWidth:{type:Number,default:0},minCropBoxHeight:{type:Number,default:0},minContainerWidth:{type:Number,default:200},minContainerHeight:{type:Number,default:100},ready:{type:Function,default:void 0},cropstart:{type:Function,default:void 0},cropmove:{type:Function,default:void 0},cropend:{type:Function,default:void 0},crop:{type:Function,default:void 0},zoom:{type:Function,default:void 0}},setup(l,{expose:r}){const o=l,f={display:"block",maxWidth:"100%"},i=a.ref();let e;function d(){o.src?e=new u(i.value,a.toRaw(o)):e=void 0}return a.onMounted(d),a.watch(()=>o,()=>{e==null||e.destroy(),a.nextTick(d)},{deep:!0}),r({clear(){return e==null?void 0:e.clear()},crop(){return e==null?void 0:e.crop()},destroy(){return e==null?void 0:e.destroy()},disable(){return e==null?void 0:e.disable()},enable(){return e==null?void 0:e.enable()},getCanvasData(){return e==null?void 0:e.getCanvasData()},getContainerData(){return e==null?void 0:e.getContainerData()},getCropBoxData(){return e==null?void 0:e.getCropBoxData()},getCroppedCanvas(t){return e==null?void 0:e.getCroppedCanvas(t)},getData(t){return e==null?void 0:e.getData(t)},getImageData(){return e==null?void 0:e.getImageData()},move(t,n){return e==null?void 0:e.move(t,n)},moveTo(t,n){return e==null?void 0:e.moveTo(t,n)},replace(t,n){return e==null?void 0:e.replace(t,n)},reset(){return e==null?void 0:e.reset()},rotate(t){return e==null?void 0:e.rotate(t)},rotateTo(t){return e==null?void 0:e.rotateTo(t)},scale(t,n){return e==null?void 0:e.scale(t,n)},scaleX(t){return e==null?void 0:e.scaleX(t)},scaleY(t){return e==null?void 0:e.scaleY(t)},setAspectRatio(t){return e==null?void 0:e.setAspectRatio(t)},setCanvasData(t){return e==null?void 0:e.setCanvasData(t)},setCropBoxData(t){return e==null?void 0:e.setCropBoxData(t)},setData(t){return e==null?void 0:e.setData(t)},setDragMode(t){return e==null?void 0:e.setDragMode(t)},zoom(t){return e==null?void 0:e.zoom(t)},zoomTo(t,n){return e==null?void 0:e.zoomTo(t,n)},flipX(){if(e){const{scaleX:t}=e.getData();e.scaleX(-t)}},flipY(){if(e){const{scaleY:t}=e.getData();e.scaleY(-t)}}}),(t,n)=>(a.openBlock(),a.createElementBlock("div",null,[a.createElementVNode("img",{ref_key:"imageRef",ref:i,src:o.src,alt:o.alt,crossorigin:l.imgCrossOrigin,style:a.normalizeStyle([f,o.imgStyle])},null,12,s)]))}})});
2 | 


--------------------------------------------------------------------------------
/dist/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/example/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 |   "root": true,
 6 |   "extends": [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/eslint-config-typescript/recommended",
10 |     "@vue/eslint-config-prettier"
11 |   ],
12 |   "env": {
13 |     "vue/setup-compiler-macros": true
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/example/.prettierignore:
--------------------------------------------------------------------------------
1 | /dist/*
2 | .local
3 | /node_modules/**
4 | 
5 | /src/assets/*
6 | 


--------------------------------------------------------------------------------
/example/.prettierrc:
--------------------------------------------------------------------------------
1 | semi: false # 语句末尾是否加分号
2 | singleQuote: true # 使用单引号代替双引号
3 | printWidth: 100 # 超过多长进行换行
4 | trailingComma: 'none' # 多行输入的尾逗号是否添加
5 | arrowParens: 'avoid' # (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
6 | endOfLine: 'lf' # 格式化换行符，默认值 lf
7 | # vueIndentScriptAndStyle: true # vue script 标签的缩进开启
8 | 


--------------------------------------------------------------------------------
/example/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/example/demo/assets/demo-d54cd5f0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ballcat-projects/vue-cropper/f3b54d2cd433e2641df0b96053d497814842255f/example/demo/assets/demo-d54cd5f0.jpg


--------------------------------------------------------------------------------
/example/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vue Cropper Example</title>
 7 |     <script type="module" crossorigin src="./assets/index-987b8e67.js"></script>
 8 |     <link rel="stylesheet" href="./assets/index-eb952961.css">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/example/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vue Cropper Example</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.ts"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "run-p type-check build-only",
 7 |     "preview": "vite preview --port 4173",
 8 |     "build-only": "vite build",
 9 |     "type-check": "vue-tsc --noEmit",
10 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
11 |     "preinstall": "npm install ../"
12 |   },
13 |   "dependencies": {
14 |     "@ballcat/vue-cropper": "file:..",
15 |     "ant-design-vue": "^3.2.15",
16 |     "vue": "^3.2.45"
17 |   },
18 |   "devDependencies": {
19 |     "@rushstack/eslint-patch": "^1.2.0",
20 |     "@types/node": "^18.11.17",
21 |     "@vitejs/plugin-vue": "^4.0.0",
22 |     "@vue/eslint-config-prettier": "^7.0.0",
23 |     "@vue/eslint-config-typescript": "^11.0.2",
24 |     "@vue/tsconfig": "^0.1.3",
25 |     "eslint": "^8.30.0",
26 |     "eslint-plugin-vue": "^9.8.0",
27 |     "npm-run-all": "^4.1.5",
28 |     "prettier": "^2.8.1",
29 |     "typescript": "~4.9.4",
30 |     "vite": "^4.0.5",
31 |     "vue-tsc": "^1.0.14"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="header">
  3 |     <div class="container">
  4 |       <a-row type="flex" align="middle" style="height: 46px">
  5 |         <a-col>
  6 |           <span style="color: rgba(0, 0, 0, 0.85); font-weight: 500; font-size: 24px">
  7 |             Vue Cropper
  8 |           </span>
  9 |         </a-col>
 10 |         <a-col :flex="1"></a-col>
 11 |         <a-col>
 12 |           <a-button
 13 |             type="link"
 14 |             size="large"
 15 |             style="color: rgba(0, 0, 0, 0.85)"
 16 |             href="https://github.com/ballcat-projects/vue-cropper"
 17 |           >
 18 |             <template #icon><GithubOutlined /></template>
 19 |             <span>Github</span>
 20 |           </a-button>
 21 |         </a-col>
 22 |       </a-row>
 23 |     </div>
 24 |   </div>
 25 | 
 26 |   <hr style="margin: 0 0 6px" />
 27 | 
 28 |   <div class="container">
 29 |     <a-row justify="center" :gutter="30">
 30 |       <a-col :md="18">
 31 |         <div class="docs-demo">
 32 |           <vue-cropper
 33 |             ref="vueCropperRef"
 34 |             class="img-container"
 35 |             :src="imageSrc"
 36 |             preview=".img-preview"
 37 |             v-bind="cropperOptions"
 38 |             @crop="onCrop"
 39 |           />
 40 |         </div>
 41 |       </a-col>
 42 |       <a-col :md="6">
 43 |         <!-- <h3>Preview:</h3> -->
 44 |         <div class="docs-preview clearfix">
 45 |           <div class="img-preview preview-lg"></div>
 46 |           <div class="img-preview preview-md"></div>
 47 |           <div class="img-preview preview-sm"></div>
 48 |           <div class="img-preview preview-xs"></div>
 49 |         </div>
 50 | 
 51 |         <!-- <h3>Data:</h3> -->
 52 |         <div class="docs-data">
 53 |           <a-input
 54 |             class="input-group"
 55 |             :value="convertNumber(data.x)"
 56 |             addon-before="X"
 57 |             addon-after="px"
 58 |           />
 59 |           <a-input
 60 |             class="input-group"
 61 |             :value="convertNumber(data.y)"
 62 |             addon-before="Y"
 63 |             addon-after="px"
 64 |           />
 65 |           <a-input
 66 |             class="input-group"
 67 |             :value="convertNumber(data.width)"
 68 |             addon-before="Width"
 69 |             addon-after="px"
 70 |           />
 71 |           <a-input
 72 |             class="input-group"
 73 |             :value="convertNumber(data.height)"
 74 |             addon-before="Height"
 75 |             addon-after="px"
 76 |           />
 77 |           <a-input
 78 |             class="input-group"
 79 |             :value="convertNumber(data.rotate)"
 80 |             addon-before="Rotate"
 81 |             addon-after="deg"
 82 |           />
 83 |           <a-input class="input-group" :value="convertNumber(data.scaleX)" addon-before="ScaleX" />
 84 |           <a-input class="input-group" :value="convertNumber(data.scaleY)" addon-before="ScaleY" />
 85 |         </div>
 86 |       </a-col>
 87 |     </a-row>
 88 | 
 89 |     <a-row justify="center" :gutter="30">
 90 |       <a-col :md="18">
 91 |         <div class="docs-buttons">
 92 |           <a-button-group>
 93 |             <a-button type="primary" @click="vueCropperRef?.setDragMode('move')">
 94 |               <template #icon><drag-outlined /></template>
 95 |             </a-button>
 96 |             <a-button type="primary" @click="vueCropperRef?.setDragMode('crop')">
 97 |               <template #icon><gateway-outlined /></template>
 98 |             </a-button>
 99 |           </a-button-group>
100 |           <a-button-group>
101 |             <a-button type="primary" @click="vueCropperRef?.zoom(0.1)">
102 |               <template #icon><zoom-in-outlined /></template>
103 |             </a-button>
104 |             <a-button type="primary" @click="vueCropperRef?.zoom(-0.1)">
105 |               <template #icon><zoom-out-outlined /></template>
106 |             </a-button>
107 |           </a-button-group>
108 |           <a-button-group>
109 |             <a-button type="primary" @click="vueCropperRef?.move(-10, 0)">
110 |               <template #icon><arrow-left-outlined /></template>
111 |             </a-button>
112 |             <a-button type="primary" @click="vueCropperRef?.move(10, 0)">
113 |               <template #icon><arrow-right-outlined /></template>
114 |             </a-button>
115 |             <a-button type="primary" @click="vueCropperRef?.move(0, -10)">
116 |               <template #icon><arrow-up-outlined /></template>
117 |             </a-button>
118 |             <a-button type="primary" @click="vueCropperRef?.move(0, 10)">
119 |               <template #icon><arrow-down-outlined /></template>
120 |             </a-button>
121 |           </a-button-group>
122 |           <a-button-group>
123 |             <a-button type="primary" @click="vueCropperRef?.rotate(-45)">
124 |               <template #icon><rotate-left-outlined /></template>
125 |             </a-button>
126 |             <a-button type="primary" @click="vueCropperRef?.rotate(45)">
127 |               <template #icon><rotate-right-outlined /></template>
128 |             </a-button>
129 |           </a-button-group>
130 |           <a-button-group>
131 |             <a-button type="primary" @click="vueCropperRef?.flipX()">
132 |               <template #icon><swap-outlined /></template>
133 |             </a-button>
134 |             <a-button type="primary" @click="vueCropperRef?.flipY()">
135 |               <template #icon><swap-outlined :rotate="90" /></template>
136 |             </a-button>
137 |           </a-button-group>
138 |           <a-button-group>
139 |             <a-button type="primary" @click="vueCropperRef?.crop()">
140 |               <template #icon><check-outlined /></template>
141 |             </a-button>
142 |             <a-button type="primary" @click="vueCropperRef?.clear()">
143 |               <template #icon><close-outlined /></template>
144 |             </a-button>
145 |           </a-button-group>
146 |           <a-button-group>
147 |             <a-button type="primary" @click="vueCropperRef?.disable()">
148 |               <template #icon><lock-outlined /></template>
149 |             </a-button>
150 |             <a-button type="primary" @click="vueCropperRef?.enable()">
151 |               <template #icon><unlock-outlined /></template>
152 |             </a-button>
153 |           </a-button-group>
154 |           <a-button-group>
155 |             <a-button type="primary" @click="vueCropperRef?.reset()">
156 |               <template #icon><sync-outlined /></template>
157 |             </a-button>
158 |             <input
159 |               ref="fileInputRef"
160 |               type="file"
161 |               accept="image/*"
162 |               style="display: none"
163 |               @change="onFileSelect"
164 |             />
165 |             <a-button type="primary" @click="fileInputRef.click()">
166 |               <template #icon><upload-outlined /></template>
167 |             </a-button>
168 |             <a-button type="primary" @click="vueCropperRef?.destroy()">
169 |               <template #icon><poweroff-outlined /></template>
170 |             </a-button>
171 |           </a-button-group>
172 | 
173 |           <a-button-group class="btn-group-crop">
174 |             <a-button type="primary" @click="openCanvasModal({ maxWidth: 4096, maxHeight: 4096 })">
175 |               Get Cropped Canvas
176 |             </a-button>
177 |             <a-button type="primary" @click="openCanvasModal({ maxWidth: 160, maxHeight: 90 })">
178 |               160 × 190
179 |             </a-button>
180 |             <a-button type="primary" @click="openCanvasModal({ maxWidth: 320, maxHeight: 180 })">
181 |               320 × 180
182 |             </a-button>
183 |           </a-button-group>
184 | 
185 |           <a-button
186 |             type="primary"
187 |             class="btn-secondary"
188 |             @click="updateAreaData(vueCropperRef?.getData() || {})"
189 |           >
190 |             Get Data
191 |           </a-button>
192 | 
193 |           <a-button type="primary" class="btn-secondary" @click="setCropperData('setData')">
194 |             Set Data
195 |           </a-button>
196 | 
197 |           <a-button
198 |             type="primary"
199 |             class="btn-secondary"
200 |             @click="updateAreaData(vueCropperRef?.getContainerData() || {})"
201 |           >
202 |             Get Container Data
203 |           </a-button>
204 | 
205 |           <a-button
206 |             type="primary"
207 |             class="btn-secondary"
208 |             @click="updateAreaData(vueCropperRef?.getImageData() || {})"
209 |           >
210 |             Get Image Data
211 |           </a-button>
212 | 
213 |           <a-button
214 |             type="primary"
215 |             class="btn-secondary"
216 |             @click="updateAreaData(vueCropperRef?.getCanvasData() || {})"
217 |           >
218 |             Get Canvas Data
219 |           </a-button>
220 | 
221 |           <a-button type="primary" class="btn-secondary" @click="setCropperData('setCanvasData')">
222 |             Set Canvas Data
223 |           </a-button>
224 | 
225 |           <a-button
226 |             type="primary"
227 |             class="btn-secondary"
228 |             @click="updateAreaData(vueCropperRef?.getCropBoxData() || {})"
229 |           >
230 |             Get Crop Box Data
231 |           </a-button>
232 | 
233 |           <a-button type="primary" class="btn-secondary" @click="setCropperData('setCropBoxData')">
234 |             Set Crop Box Data
235 |           </a-button>
236 | 
237 |           <a-button type="primary" class="btn-secondary" @click="vueCropperRef?.moveTo(0)">
238 |             Move to [0,0]
239 |           </a-button>
240 | 
241 |           <a-button type="primary" class="btn-secondary" @click="vueCropperRef?.zoomTo(1)">
242 |             Zoom to 100%
243 |           </a-button>
244 | 
245 |           <a-button type="primary" class="btn-secondary" @click="vueCropperRef?.rotateTo(180)">
246 |             Rotate 180°
247 |           </a-button>
248 | 
249 |           <a-button type="primary" class="btn-secondary" @click="vueCropperRef?.scale(-2, -1)">
250 |             Scale (-2, -1)
251 |           </a-button>
252 | 
253 |           <a-textarea
254 |             v-model:value="textareaData"
255 |             placeholder="Get data to here or set data with this value"
256 |           />
257 |         </div>
258 |       </a-col>
259 |       <a-col :md="6">
260 |         <div class="docs-toggles">
261 |           <a-radio-group v-model:value="cropperOptions.aspectRatio" button-style="solid">
262 |             <a-radio-button :value="16 / 9">16:9</a-radio-button>
263 |             <a-radio-button :value="4 / 3">4:3</a-radio-button>
264 |             <a-radio-button :value="1">1:1</a-radio-button>
265 |             <a-radio-button :value="2 / 3">2:3</a-radio-button>
266 |             <a-radio-button :value="0">Free</a-radio-button>
267 |           </a-radio-group>
268 | 
269 |           <a-radio-group v-model:value="cropperOptions.viewMode" button-style="solid">
270 |             <a-radio-button :value="0">VM0</a-radio-button>
271 |             <a-radio-button :value="1">VM1</a-radio-button>
272 |             <a-radio-button :value="2">VM2</a-radio-button>
273 |             <a-radio-button :value="3">VM3</a-radio-button>
274 |           </a-radio-group>
275 | 
276 |           <a-dropdown>
277 |             <template #overlay>
278 |               <a-menu>
279 |                 <a-menu-item>
280 |                   <a-checkbox v-model:checked="cropperOptions.responsive">responsive</a-checkbox>
281 |                 </a-menu-item>
282 |                 <a-menu-item>
283 |                   <a-checkbox v-model:checked="cropperOptions.restore">restore</a-checkbox>
284 |                 </a-menu-item>
285 |                 <a-menu-item>
286 |                   <a-checkbox v-model:checked="cropperOptions.checkCrossOrigin"
287 |                     >checkCrossOrigin</a-checkbox
288 |                   >
289 |                 </a-menu-item>
290 |                 <a-menu-item>
291 |                   <a-checkbox v-model:checked="cropperOptions.checkOrientation"
292 |                     >checkOrientation</a-checkbox
293 |                   >
294 |                 </a-menu-item>
295 |                 <a-menu-item>
296 |                   <a-checkbox v-model:checked="cropperOptions.modal">modal</a-checkbox>
297 |                 </a-menu-item>
298 |                 <a-menu-item>
299 |                   <a-checkbox v-model:checked="cropperOptions.guides">guides</a-checkbox>
300 |                 </a-menu-item>
301 |                 <a-menu-item>
302 |                   <a-checkbox v-model:checked="cropperOptions.center">center</a-checkbox>
303 |                 </a-menu-item>
304 |                 <a-menu-item>
305 |                   <a-checkbox v-model:checked="cropperOptions.highlight">highlight</a-checkbox>
306 |                 </a-menu-item>
307 |                 <a-menu-item>
308 |                   <a-checkbox v-model:checked="cropperOptions.background">background</a-checkbox>
309 |                 </a-menu-item>
310 |                 <a-menu-item>
311 |                   <a-checkbox v-model:checked="cropperOptions.autoCrop">autoCrop</a-checkbox>
312 |                 </a-menu-item>
313 |                 <a-menu-item>
314 |                   <a-checkbox v-model:checked="cropperOptions.movable">movable</a-checkbox>
315 |                 </a-menu-item>
316 |                 <a-menu-item>
317 |                   <a-checkbox v-model:checked="cropperOptions.rotatable">rotatable</a-checkbox>
318 |                 </a-menu-item>
319 |                 <a-menu-item>
320 |                   <a-checkbox v-model:checked="cropperOptions.scalable">scalable</a-checkbox>
321 |                 </a-menu-item>
322 |                 <a-menu-item>
323 |                   <a-checkbox v-model:checked="cropperOptions.zoomable">zoomable</a-checkbox>
324 |                 </a-menu-item>
325 |                 <a-menu-item>
326 |                   <a-checkbox v-model:checked="cropperOptions.zoomOnTouch">zoomOnTouch</a-checkbox>
327 |                 </a-menu-item>
328 |                 <a-menu-item>
329 |                   <a-checkbox v-model:checked="cropperOptions.zoomOnWheel">zoomOnWheel</a-checkbox>
330 |                 </a-menu-item>
331 |                 <a-menu-item>
332 |                   <a-checkbox v-model:checked="cropperOptions.cropBoxMovable">
333 |                     cropBoxMovable
334 |                   </a-checkbox>
335 |                 </a-menu-item>
336 |                 <a-menu-item>
337 |                   <a-checkbox v-model:checked="cropperOptions.cropBoxResizable">
338 |                     cropBoxResizable
339 |                   </a-checkbox>
340 |                 </a-menu-item>
341 |                 <a-menu-item>
342 |                   <a-checkbox v-model:checked="cropperOptions.toggleDragModeOnDblclick">
343 |                     toggleDragModeOnDblclick
344 |                   </a-checkbox>
345 |                 </a-menu-item>
346 |               </a-menu>
347 |             </template>
348 |             <a-button style="width: 100%" type="primary">
349 |               Toggle Options
350 |               <DownOutlined />
351 |             </a-button>
352 |           </a-dropdown>
353 |         </div>
354 |       </a-col>
355 |     </a-row>
356 |   </div>
357 | 
358 |   <!-- 底部占位 -->
359 |   <div style="height: 40px" />
360 | 
361 |   <canvas-modal ref="canvasModalRef"></canvas-modal>
362 | </template>
363 | 
364 | <script setup lang="ts">
365 | import VueCropper from '@ballcat/vue-cropper'
366 | import type { VueCropperInstance } from '@ballcat/vue-cropper'
367 | import 'cropperjs/dist/cropper.css'
368 | import type Cropper from 'cropperjs'
369 | import { reactive, ref, watch } from 'vue'
370 | import {
371 |   DragOutlined,
372 |   GatewayOutlined,
373 |   ZoomInOutlined,
374 |   ZoomOutOutlined,
375 |   ArrowLeftOutlined,
376 |   ArrowRightOutlined,
377 |   ArrowUpOutlined,
378 |   ArrowDownOutlined,
379 |   RotateLeftOutlined,
380 |   RotateRightOutlined,
381 |   SwapOutlined,
382 |   CheckOutlined,
383 |   CloseOutlined,
384 |   LockOutlined,
385 |   UnlockOutlined,
386 |   SyncOutlined,
387 |   UploadOutlined,
388 |   PoweroffOutlined,
389 |   DownOutlined,
390 |   GithubOutlined
391 | } from '@ant-design/icons-vue'
392 | import CanvasModal from '@/CanvasModal.vue'
393 | 
394 | const vueCropperRef = ref<VueCropperInstance>()
395 | 
396 | const imageSrc = ref(new URL('./assets/demo.jpg', import.meta.url).href)
397 | 
398 | const cropperOptions: Cropper.Options = reactive({
399 |   aspectRatio: 16 / 9,
400 |   viewMode: 0,
401 |   responsive: true,
402 |   restore: true,
403 |   checkCrossOrigin: true,
404 |   checkOrientation: true,
405 |   modal: true,
406 |   guides: true,
407 |   center: true,
408 |   highlight: true,
409 |   background: true,
410 |   autoCrop: true,
411 |   movable: true,
412 |   rotatable: true,
413 |   scalable: true,
414 |   zoomable: true,
415 |   zoomOnTouch: true,
416 |   zoomOnWheel: true,
417 |   cropBoxMovable: true,
418 |   cropBoxResizable: true,
419 |   toggleDragModeOnDblclick: true
420 | })
421 | 
422 | watch(
423 |   () => cropperOptions,
424 |   () => console.log(cropperOptions),
425 |   { deep: true }
426 | )
427 | 
428 | const data = ref<Cropper.SetDataOptions>({})
429 | const convertNumber = (num?: number) => num != null ? Math.round(num): undefined
430 | 
431 | const onCrop = (e: CustomEvent) => {
432 |   data.value = e.detail
433 | }
434 | 
435 | const canvasModalRef = ref()
436 | 
437 | const openCanvasModal = (options: Cropper.GetCroppedCanvasOptions) => {
438 |   const croppedCanvas = vueCropperRef.value?.getCroppedCanvas(options)
439 |   canvasModalRef.value?.open(croppedCanvas)
440 | }
441 | 
442 | // file select input
443 | const fileInputRef = ref()
444 | const onFileSelect = (event: any) => {
445 |   const files = event.target.files
446 | 
447 |   if (files && files.length) {
448 |     const file = files[0]
449 |     if (/^image\/\w+/.test(file.type)) {
450 |       imageSrc.value = URL.createObjectURL(file)
451 |       fileInputRef.value.value = null
452 |     } else {
453 |       window.alert('Please choose an image file.')
454 |     }
455 |   }
456 | }
457 | 
458 | // textarea 的数据
459 | const textareaData = ref('')
460 | const updateAreaData = (data: object) => {
461 |   let value
462 |   try {
463 |     value = JSON.stringify(data)
464 |   } catch (e: any) {
465 |     console.log(e.message)
466 |   }
467 |   value && (textareaData.value = value)
468 | }
469 | 
470 | const setCropperData = (method: keyof VueCropperInstance) => {
471 |   if (textareaData.value) {
472 |     let value
473 |     try {
474 |       value = JSON.parse(textareaData.value)
475 |     } catch (e: any) {
476 |       console.log(e.message)
477 |     }
478 |     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
479 |     // @ts-ignore
480 |     value && vueCropperRef.value?.[method](value)
481 |   }
482 | }
483 | </script>
484 | 
485 | <style>
486 | @import 'assets/app.css';
487 | 
488 | .container {
489 |   width: 100%;
490 |   padding-right: 15px;
491 |   padding-left: 15px;
492 |   margin-right: auto;
493 |   margin-left: auto;
494 | }
495 | 
496 | @media (min-width: 576px) {
497 |   .container {
498 |     max-width: 540px;
499 |   }
500 | }
501 | 
502 | @media (min-width: 768px) {
503 |   .container {
504 |     max-width: 720px;
505 |   }
506 | }
507 | 
508 | @media (min-width: 992px) {
509 |   .container {
510 |     max-width: 960px;
511 |   }
512 | }
513 | 
514 | @media (min-width: 1200px) {
515 |   .container {
516 |     max-width: 1140px;
517 |   }
518 | }
519 | 
520 | .clearfix::after {
521 |   display: block;
522 |   clear: both;
523 |   content: '';
524 | }
525 | </style>
526 | 


--------------------------------------------------------------------------------
/example/src/CanvasModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a-modal
 3 |     v-model:visible="visible"
 4 |     title="Cropped"
 5 |     cancel-text="Cancel"
 6 |     okText="Download"
 7 |     :width="500"
 8 |     @ok="downloadImage"
 9 |   >
10 |     <div class="canvas-container" ref="containerRef" style="text-align: center"></div>
11 |   </a-modal>
12 | </template>
13 | 
14 | <script setup lang="ts">
15 | import { ref, nextTick } from 'vue'
16 | 
17 | const visible = ref(false)
18 | 
19 | const canvasDom = ref()
20 | 
21 | const containerRef = ref()
22 | 
23 | const downloadImage = () => {
24 |   canvasDom.value.toBlob((blob: Blob) => {
25 |     const a = document.createElement('a')
26 |     a.href = URL.createObjectURL(blob)
27 |     a.download = 'cropped'
28 |     // start download
29 |     a.click()
30 |   })
31 | }
32 | 
33 | defineExpose({
34 |   open(canvas: HTMLCanvasElement) {
35 |     visible.value = true
36 |     // 删除子元素
37 |     const container = containerRef.value
38 |     while (container?.hasChildNodes()) {
39 |       container.removeChild(container.firstChild)
40 |     }
41 |     canvasDom.value = canvas
42 |     nextTick(() => {
43 |       console.log(canvas)
44 |       containerRef.value?.appendChild(canvas)
45 |     })
46 |   }
47 | })
48 | </script>
49 | 
50 | <style>
51 | .canvas-container > canvas {
52 |   max-width: 100%;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/example/src/assets/app.css:
--------------------------------------------------------------------------------
  1 | .header {
  2 |   display: flex;
  3 | }
  4 | 
  5 | .docs-demo {
  6 |   margin-bottom: 1rem;
  7 |   overflow: hidden;
  8 |   padding: 2px;
  9 | }
 10 | 
 11 | .img-container,
 12 | .img-preview {
 13 |   background-color: #f7f7f7;
 14 |   text-align: center;
 15 |   width: 100%;
 16 | }
 17 | 
 18 | .img-container {
 19 |   max-height: 497px;
 20 |   min-height: 200px;
 21 | }
 22 | 
 23 | @media (min-width: 768px) {
 24 |   .img-container {
 25 |     min-height: 497px;
 26 |   }
 27 | }
 28 | 
 29 | .img-container > img {
 30 |   max-width: 100%;
 31 | }
 32 | 
 33 | .docs-preview {
 34 |   margin-right: -1rem;
 35 |   padding-top: 2px;
 36 | }
 37 | 
 38 | .img-preview {
 39 |   float: left;
 40 |   margin-bottom: 0.5rem;
 41 |   margin-right: 0.5rem;
 42 |   overflow: hidden;
 43 | }
 44 | 
 45 | .img-preview > img {
 46 |   max-width: 100%;
 47 | }
 48 | 
 49 | .preview-lg {
 50 |   height: 9rem;
 51 |   width: 16rem;
 52 | }
 53 | 
 54 | .preview-md {
 55 |   height: 4.5rem;
 56 |   width: 8rem;
 57 | }
 58 | 
 59 | .preview-sm {
 60 |   height: 2.25rem;
 61 |   width: 4rem;
 62 | }
 63 | 
 64 | .preview-xs {
 65 |   height: 1.125rem;
 66 |   margin-right: 0;
 67 |   width: 2rem;
 68 | }
 69 | 
 70 | .docs-data > .input-group {
 71 |   margin-bottom: 0.5rem;
 72 |   height: 31px;
 73 | }
 74 | 
 75 | .docs-data .ant-input-group-addon {
 76 |   background-color: #e9ecef;
 77 |   border-radius: 0.2rem;
 78 |   text-align: left;
 79 | }
 80 | 
 81 | .docs-data .ant-input-group-addon:first-child {
 82 |   min-width: 4rem;
 83 | }
 84 | 
 85 | .docs-data .ant-input-group-addon:last-child {
 86 |   min-width: 3rem;
 87 | }
 88 | 
 89 | .docs-buttons > .ant-btn,
 90 | .docs-buttons > .ant-btn-group,
 91 | .docs-buttons > .form-control {
 92 |   margin-bottom: 0.5rem;
 93 |   margin-right: 0.5rem;
 94 | }
 95 | 
 96 | .docs-buttons .ant-btn-icon-only {
 97 |   width: 40px;
 98 |   height: 40px;
 99 | }
100 | 
101 | .docs-buttons .ant-btn {
102 |   height: 40px;
103 | }
104 | 
105 | 
106 | .docs-toggles > .ant-btn,
107 | .docs-toggles > .ant-radio-group,
108 | .docs-toggles > .dropdown {
109 |   margin-bottom: 0.5rem;
110 | }
111 | 
112 | .docs-toggles > .ant-radio-group .ant-radio-button-wrapper {
113 |   padding: 0 14px;
114 |   height: 40px;
115 |   line-height: 38px;
116 | }
117 | 
118 | .btn-group-crop > .ant-btn-primary {
119 |   background: #28a745;
120 |   border-color: #28a745;
121 |  }
122 | .btn-group-crop > .ant-btn-primary:hover {
123 |   background: #42bf5b;
124 |   border-color: #42bf5b;
125 | }
126 | .btn-group-crop .ant-btn-primary:hover, .btn-group-crop .ant-btn-primary:focus {
127 |   color: #fff;
128 |   background: #42bf5b;
129 |   border-color: #42bf5b;
130 | }
131 | .btn-group-crop .ant-btn-primary:first-child:not(:last-child) {
132 |   border-right-color: #8ec59a !important;
133 | }
134 | .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
135 |   border-left-color: #8ec59a !important;
136 |   border-right-color: #8ec59a !important;
137 | }
138 | .btn-group-crop .ant-btn-primary:last-child:not(:first-child), .btn-group-crop .ant-btn-primary + .ant-btn-primary {
139 |   border-left-color: #8ec59a !important;
140 | }
141 | 
142 | 
143 | .btn-secondary.ant-btn-primary {
144 |   background: #6c757d;
145 |   border-color: #6c757d;
146 | }
147 | .btn-secondary.ant-btn-primary:hover {
148 |   background: #9397a1;
149 |   border-color: #9397a1;
150 | }
151 | .btn-secondary.ant-btn-primary:hover, .btn-secondary.ant-btn-primary:focus {
152 |   color: #fff;
153 |   background: #9397a1;
154 |   border-color: #9397a1;
155 | }
156 | 


--------------------------------------------------------------------------------
/example/src/assets/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ballcat-projects/vue-cropper/f3b54d2cd433e2641df0b96053d497814842255f/example/src/assets/demo.jpg


--------------------------------------------------------------------------------
/example/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import 'ant-design-vue/dist/antd.css'
 4 | 
 5 | import {
 6 |   Button,
 7 |   Row,
 8 |   Col,
 9 |   Input,
10 |   Radio,
11 |   Modal,
12 |   Dropdown,
13 |   Menu,
14 |   Checkbox,
15 |   Upload
16 | } from 'ant-design-vue'
17 | 
18 | const app = createApp(App)
19 | 
20 | app
21 |   .use(Button)
22 |   .use(Row)
23 |   .use(Col)
24 |   .use(Input)
25 |   .use(Radio)
26 |   .use(Modal)
27 |   .use(Dropdown)
28 |   .use(Menu)
29 |   .use(Checkbox)
30 |   .use(Upload)
31 | 
32 | app.mount('#app')
33 | 


--------------------------------------------------------------------------------
/example/tsconfig.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "compilerOptions": {
 5 |     "baseUrl": ".",
 6 |     "paths": {
 7 |       "@/*": ["./src/*"]
 8 |     }
 9 |   },
10 | 
11 |   "references": [
12 |     {
13 |       "path": "./tsconfig.config.json"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/example/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [vue()],
 9 |   resolve: {
10 |     alias: {
11 |       '@': fileURLToPath(new URL('./src', import.meta.url))
12 |     }
13 |   },
14 |   build: {
15 |     outDir: 'demo'
16 |   },
17 |   base: './'
18 | })
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@ballcat/vue-cropper",
 3 |   "description": "vue image cropper by cropperjs",
 4 |   "version": "1.0.6",
 5 |   "scripts": {
 6 |     "build": "run-p type-check build-only",
 7 |     "build-only": "vite build",
 8 |     "type-check": "vue-tsc --noEmit",
 9 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
10 |   },
11 |   "files": [
12 |     "dist"
13 |   ],
14 |   "types": "./dist/index.d.ts",
15 |   "main": "./dist/index.umd.js",
16 |   "module": "./dist/index.es.js",
17 |   "exports": {
18 |     ".": {
19 |       "import": {
20 |         "types": "./dist/index.d.ts",
21 |         "default": "./dist/index.es.js"
22 |       },
23 |       "require": {
24 |         "types": "./dist/index.d.ts",
25 |         "default": "./dist/index.umd.js"
26 |       }
27 |     }
28 |   },
29 |   "keywords": [
30 |     "cropper",
31 |     "vue-cropper",
32 |     "vue-cropperjs",
33 |     "cropperjs"
34 |   ],
35 |   "author": "Hccake <chengbohua@foxmail.com>",
36 |   "license": "MIT",
37 |   "dependencies": {
38 |     "cropperjs": "^1.5.13"
39 |   },
40 |   "peerDependencies": {
41 |     "vue": ">=3.2.0"
42 |   },
43 |   "devDependencies": {
44 |     "@rushstack/eslint-patch": "^1.2.0",
45 |     "@types/node": "^18.11.17",
46 |     "@vitejs/plugin-vue": "^4.0.0",
47 |     "@vue/eslint-config-prettier": "^7.0.0",
48 |     "@vue/eslint-config-typescript": "^11.0.2",
49 |     "@vue/tsconfig": "^0.1.3",
50 |     "eslint": "^8.30.0",
51 |     "eslint-plugin-vue": "^9.8.0",
52 |     "npm-run-all": "^4.1.5",
53 |     "prettier": "^2.8.1",
54 |     "typescript": "~4.9.4",
55 |     "vite": "^4.0.5",
56 |     "vite-plugin-dts": "^1.7.1",
57 |     "vue": "^3.2.45",
58 |     "vue-tsc": "^1.0.14"
59 |   },
60 |   "engines": {
61 |     "node": ">=12.0.0"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/VueCropper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <img
  4 |       ref="imageRef"
  5 |       :src="props.src"
  6 |       :alt="props.alt"
  7 |       :crossorigin="imgCrossOrigin"
  8 |       :style="[imageStyle, props.imgStyle]"
  9 |     />
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script setup lang="ts">
 14 | import Cropper from 'cropperjs'
 15 | import { nextTick, onMounted, ref, toRaw, watch } from 'vue'
 16 | import type { CSSProperties, PropType, ImgHTMLAttributes } from 'vue'
 17 | /* Ensure the size of the image fit the container perfectly */
 18 | const imageStyle = {
 19 |   display: 'block',
 20 |   /* This rule is very important, please don't ignore this */
 21 |   maxWidth: '100%'
 22 | }
 23 | const props = defineProps({
 24 |   // custom props
 25 |   src: {
 26 |     type: String,
 27 |     required: true
 28 |   },
 29 |   alt: {
 30 |     type: String,
 31 |     default: 'image'
 32 |   },
 33 |   imgStyle: {
 34 |     type: Object as PropType<CSSProperties>,
 35 |     default: () => ({})
 36 |   },
 37 |   imgCrossOrigin: {
 38 |     type: String as PropType<ImgHTMLAttributes['crossorigin']>,
 39 |     default: undefined
 40 |   },
 41 |   // ========= CropperJS options =======
 42 |   // Define the view mode of the cropper
 43 |   viewMode: {
 44 |     type: Number as PropType<Cropper.ViewMode>, // 0, 1, 2, 3
 45 |     default: 0
 46 |   },
 47 |   // Define the dragging mode of the cropper
 48 |   dragMode: {
 49 |     type: String as PropType<Cropper.DragMode>, // 'crop', 'move' or 'none'
 50 |     default: 'crop'
 51 |   },
 52 |   // Define the initial aspect ratio of the crop box
 53 |   initialAspectRatio: {
 54 |     type: Number,
 55 |     default: NaN
 56 |   },
 57 |   // Define the aspect ratio of the crop box
 58 |   aspectRatio: {
 59 |     type: Number,
 60 |     default: NaN
 61 |   },
 62 |   // An object with the previous cropping result data
 63 |   data: {
 64 |     type: Object as PropType<Cropper.SetDataOptions>,
 65 |     default: undefined
 66 |   },
 67 |   // A selector for adding extra containers to preview
 68 |   preview: {
 69 |     type: [String, Array, Object] as PropType<Cropper.Options['preview']>,
 70 |     default: ''
 71 |   },
 72 |   // Re-render the cropper when resize the window
 73 |   responsive: {
 74 |     type: Boolean,
 75 |     default: true
 76 |   },
 77 |   // Restore the cropped area after resize the window
 78 |   restore: {
 79 |     type: Boolean,
 80 |     default: true
 81 |   },
 82 |   // Check if the current image is a cross-origin image
 83 |   checkCrossOrigin: {
 84 |     type: Boolean,
 85 |     default: true
 86 |   },
 87 |   // Check the current image's Exif Orientation information
 88 |   checkOrientation: {
 89 |     type: Boolean,
 90 |     default: true
 91 |   },
 92 |   // Show the black modal
 93 |   modal: {
 94 |     type: Boolean,
 95 |     default: true
 96 |   },
 97 |   // Show the dashed lines for guiding
 98 |   guides: {
 99 |     type: Boolean,
100 |     default: true
101 |   },
102 |   // Show the center indicator for guiding
103 |   center: {
104 |     type: Boolean,
105 |     default: true
106 |   },
107 |   // Show the white modal to highlight the crop box
108 |   highlight: {
109 |     type: Boolean,
110 |     default: true
111 |   },
112 |   // Show the grid background
113 |   background: {
114 |     type: Boolean,
115 |     default: true
116 |   },
117 |   // Enable to crop the image automatically when initialize
118 |   autoCrop: {
119 |     type: Boolean,
120 |     default: true
121 |   },
122 |   // Define the percentage of automatic cropping area when initializes
123 |   autoCropArea: {
124 |     type: Number,
125 |     default: 0.8
126 |   },
127 |   // Enable to move the image
128 |   movable: {
129 |     type: Boolean,
130 |     default: true
131 |   },
132 |   // Enable to rotate the image
133 |   rotatable: {
134 |     type: Boolean,
135 |     default: true
136 |   },
137 |   // Enable to scale the image
138 |   scalable: {
139 |     type: Boolean,
140 |     default: true
141 |   },
142 |   // Enable to zoom the image
143 |   zoomable: {
144 |     type: Boolean,
145 |     default: true
146 |   },
147 |   // Enable to zoom the image by dragging touch
148 |   zoomOnTouch: {
149 |     type: Boolean,
150 |     default: true
151 |   },
152 |   // Enable to zoom the image by wheeling mouse
153 |   zoomOnWheel: {
154 |     type: Boolean,
155 |     default: true
156 |   },
157 |   // Define zoom ratio when zoom the image by wheeling mouse
158 |   wheelZoomRatio: {
159 |     type: Number,
160 |     default: 0.1
161 |   },
162 |   // Enable to move the crop box
163 |   cropBoxMovable: {
164 |     type: Boolean,
165 |     default: true
166 |   },
167 |   // Enable to resize the crop box
168 |   cropBoxResizable: {
169 |     type: Boolean,
170 |     default: true
171 |   },
172 |   // Toggle drag mode between "crop" and "move" when click twice on the cropper
173 |   toggleDragModeOnDblclick: {
174 |     type: Boolean,
175 |     default: true
176 |   },
177 |   // Size limitation
178 |   minCanvasWidth: {
179 |     type: Number,
180 |     default: 0
181 |   },
182 |   minCanvasHeight: {
183 |     type: Number,
184 |     default: 0
185 |   },
186 |   minCropBoxWidth: {
187 |     type: Number,
188 |     default: 0
189 |   },
190 |   minCropBoxHeight: {
191 |     type: Number,
192 |     default: 0
193 |   },
194 |   minContainerWidth: {
195 |     type: Number,
196 |     default: 200
197 |   },
198 |   minContainerHeight: {
199 |     type: Number,
200 |     default: 100
201 |   },
202 |   // Shortcuts of events
203 |   ready: {
204 |     type: Function as PropType<(event: Cropper.ReadyEvent<EventTarget>) => void>,
205 |     default: undefined
206 |   },
207 |   cropstart: {
208 |     type: Function as PropType<(event: Cropper.CropStartEvent) => void>,
209 |     default: undefined
210 |   },
211 |   cropmove: {
212 |     type: Function as PropType<(event: Cropper.CropMoveEvent) => void>,
213 |     default: undefined
214 |   },
215 |   cropend: {
216 |     type: Function as PropType<(event: Cropper.CropEndEvent) => void>,
217 |     default: undefined
218 |   },
219 |   crop: {
220 |     type: Function as PropType<(event: Cropper.CropEvent) => void>,
221 |     default: undefined
222 |   },
223 |   zoom: {
224 |     type: Function as PropType<(event: Cropper.ZoomEvent) => void>,
225 |     default: undefined
226 |   }
227 | })
228 | 
229 | const imageRef = ref()
230 | 
231 | let cropper: Cropper | undefined
232 | function initCropper() {
233 |   if (props.src) {
234 |     cropper = new Cropper(imageRef.value, toRaw(props) as unknown as Cropper.Options)
235 |   } else {
236 |     cropper = undefined
237 |   }
238 | }
239 | 
240 | // init when first mounted
241 | onMounted(initCropper)
242 | 
243 | // reinit when props change
244 | watch(
245 |   () => props,
246 |   () => {
247 |     cropper?.destroy()
248 |     nextTick(initCropper)
249 |   },
250 |   { deep: true }
251 | )
252 | 
253 | defineExpose({
254 |   // Clear the crop box
255 |   clear() {
256 |     return cropper?.clear()
257 |   },
258 |   // Show the crop box manually
259 |   crop() {
260 |     return cropper?.crop()
261 |   },
262 |   /**
263 |    * Destroy the cropper and remove the instance from the image
264 |    * @returns {Cropper} this
265 |    */
266 |   destroy() {
267 |     return cropper?.destroy()
268 |   },
269 |   // Disable (freeze) the cropper
270 |   disable() {
271 |     return cropper?.disable()
272 |   },
273 |   // Enable (unfreeze) the cropper
274 |   enable() {
275 |     return cropper?.enable()
276 |   },
277 |   /**
278 |    * Get the canvas position and size data.
279 |    * @returns {Object} The result canvas data.
280 |    */
281 |   getCanvasData() {
282 |     return cropper?.getCanvasData()
283 |   },
284 |   /**
285 |    * Get the container size data.
286 |    * @returns {Object} The result container data.
287 |    */
288 |   getContainerData() {
289 |     return cropper?.getContainerData()
290 |   },
291 |   /**
292 |    * Get the crop box position and size data.
293 |    * @returns {Object} The result crop box data.
294 |    */
295 |   getCropBoxData() {
296 |     return cropper?.getCropBoxData()
297 |   },
298 |   /**
299 |    * Get a canvas drawn the cropped image.
300 |    * @param {Object} [options={}] - The config options.
301 |    * @returns {HTMLCanvasElement} - The result canvas.
302 |    */
303 |   getCroppedCanvas(options?: Cropper.GetCroppedCanvasOptions) {
304 |     return cropper?.getCroppedCanvas(options)
305 |   },
306 |   /**
307 |    * Get the cropped area position and size data (base on the original image)
308 |    * @param {boolean} [rounded=false] - Indicate if round the data values or not.
309 |    * @returns {Object} The result cropped data.
310 |    */
311 |   getData(rounded?: boolean) {
312 |     return cropper?.getData(rounded)
313 |   },
314 |   /**
315 |    * Get the image position and size data.
316 |    * @returns {Object} The result image data.
317 |    */
318 |   getImageData() {
319 |     return cropper?.getImageData()
320 |   },
321 |   /**
322 |    * Move the canvas with relative offsets
323 |    * @param {number} offsetX - The relative offset distance on the x-axis.
324 |    * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis.
325 |    * @returns {Cropper} this
326 |    */
327 |   move(offsetX: number, offsetY?: number) {
328 |     return cropper?.move(offsetX, offsetY)
329 |   },
330 |   /**
331 |    * Move the canvas to an absolute point
332 |    * @param {number} x - The x-axis coordinate.
333 |    * @param {number} [y=x] - The y-axis coordinate.
334 |    * @returns {Cropper} this
335 |    */
336 |   moveTo(x: number, y?: number) {
337 |     return cropper?.moveTo(x, y)
338 |   },
339 |   /**
340 |    * Replace the image's src and rebuild the cropper
341 |    * @param {string} url - The new URL.
342 |    * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.
343 |    * @returns {Cropper} this
344 |    */
345 |   replace(url: string, hasSameSize?: boolean) {
346 |     return cropper?.replace(url, hasSameSize)
347 |   },
348 |   // Reset the image and crop box to their initial states
349 |   reset() {
350 |     return cropper?.reset()
351 |   },
352 |   /**
353 |    * Rotate the canvas with a relative degree
354 |    * @param {number} degree - The rotate degree.
355 |    * @returns {Cropper} this
356 |    */
357 |   rotate(degree: number) {
358 |     return cropper?.rotate(degree)
359 |   },
360 |   /**
361 |    * Rotate the canvas to an absolute degree
362 |    * @param {number} degree - The rotate degree.
363 |    * @returns {Cropper} this
364 |    */
365 |   rotateTo(degree: number) {
366 |     return cropper?.rotateTo(degree)
367 |   },
368 |   /**
369 |    * Scale the image
370 |    * @param {number} scaleX - The scale ratio on the x-axis.
371 |    * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
372 |    * @returns {Cropper} this
373 |    */
374 |   scale(scaleX: number, scaleY?: number) {
375 |     return cropper?.scale(scaleX, scaleY)
376 |   },
377 |   /**
378 |    * Scale the image on the x-axis.
379 |    * @param {number} scaleX - The scale ratio on the x-axis.
380 |    * @returns {Cropper} this
381 |    */
382 |   scaleX(scaleX: number) {
383 |     return cropper?.scaleX(scaleX)
384 |   },
385 |   /**
386 |    * Scale the image on the y-axis.
387 |    * @param {number} scaleY - The scale ratio on the y-axis.
388 |    * @returns {Cropper} this
389 |    */
390 |   scaleY(scaleY: number) {
391 |     return cropper?.scaleY(scaleY)
392 |   },
393 |   /**
394 |    * Change the aspect ratio of the crop box.
395 |    * @param {number} aspectRatio - The new aspect ratio.
396 |    * @returns {Cropper} this
397 |    */
398 |   setAspectRatio(aspectRatio: number) {
399 |     return cropper?.setAspectRatio(aspectRatio)
400 |   },
401 |   /**
402 |    * Set the canvas position and size with new data.
403 |    * @param {Object} data - The new canvas data.
404 |    * @returns {Cropper} this
405 |    */
406 |   setCanvasData(data: Cropper.SetCanvasDataOptions) {
407 |     return cropper?.setCanvasData(data)
408 |   },
409 |   /**
410 |    * Set the crop box position and size with new data.
411 |    * @param {Object} data - The new crop box data.
412 |    * @returns {Cropper} this
413 |    */
414 |   setCropBoxData(data: Cropper.SetCropBoxDataOptions) {
415 |     return cropper?.setCropBoxData(data)
416 |   },
417 |   /**
418 |    * Set the cropped area position and size with new data
419 |    * @param {Object} data - The new data.
420 |    * @returns {Cropper} this
421 |    */
422 |   setData(data: Cropper.SetDataOptions) {
423 |     return cropper?.setData(data)
424 |   },
425 |   /**
426 |    * Change the drag mode.
427 |    * @param {string} dragMode - The new drag mode.
428 |    * @returns {Cropper} this
429 |    */
430 |   setDragMode(dragMode: Cropper.DragMode) {
431 |     return cropper?.setDragMode(dragMode)
432 |   },
433 |   /**
434 |    * Zoom the canvas with a relative ratio
435 |    * @param {number} ratio - The target ratio.
436 |    * @returns {Cropper} this
437 |    */
438 |   zoom(ratio: number) {
439 |     return cropper?.zoom(ratio)
440 |   },
441 |   /**
442 |    * Zoom the canvas to an absolute ratio
443 |    * @param {number} ratio - The target ratio.
444 |    * @param {Object} pivot - The zoom pivot point coordinate.
445 |    * @returns {Cropper} this
446 |    */
447 |   zoomTo(ratio: number, pivot?: { x: number; y: number }) {
448 |     return cropper?.zoomTo(ratio, pivot)
449 |   },
450 |   /**
451 |    * flip the image horizontally
452 |    */
453 |   flipX() {
454 |     if (cropper) {
455 |       const { scaleX } = cropper.getData()
456 |       cropper.scaleX(-scaleX)
457 |     }
458 |   },
459 |   /**
460 |    * flip the image vertically
461 |    */
462 |   flipY() {
463 |     if (cropper) {
464 |       const { scaleY } = cropper.getData()
465 |       cropper.scaleY(-scaleY)
466 |     }
467 |   }
468 | })
469 | </script>
470 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './types'
2 | 
3 | import VueCropper from './VueCropper.vue'
4 | export default VueCropper
5 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import type Cropper from 'cropperjs'
 2 | 
 3 | export interface VueCropperInstance {
 4 |   clear(): Cropper
 5 |   crop(): Cropper
 6 |   destroy(): Cropper
 7 |   disable(): Cropper
 8 |   enable(): Cropper
 9 |   getCanvasData(): Cropper.CanvasData
10 |   getContainerData(): Cropper.ContainerData
11 |   getCropBoxData(): Cropper.CropBoxData
12 |   getCroppedCanvas(options?: Cropper.GetCroppedCanvasOptions): HTMLCanvasElement
13 |   getData(rounded?: boolean): Cropper.Data
14 |   getImageData(): Cropper.ImageData
15 |   move(offsetX: number, offsetY?: number): Cropper
16 |   moveTo(x: number, y?: number): Cropper
17 |   replace(url: string, onlyColorChanged?: boolean): Cropper
18 |   reset(): Cropper
19 |   rotate(degree: number): Cropper
20 |   rotateTo(degree: number): Cropper
21 |   scale(scaleX: number, scaleY?: number): Cropper
22 |   scaleX(scaleX: number): Cropper
23 |   scaleY(scaleY: number): Cropper
24 |   setAspectRatio(aspectRatio: number): Cropper
25 |   setCanvasData(data: Cropper.SetCanvasDataOptions): Cropper
26 |   setCropBoxData(data: Cropper.SetCropBoxDataOptions): Cropper
27 |   setData(data: Cropper.SetDataOptions): Cropper
28 |   setDragMode(dragMode: Cropper.DragMode): Cropper
29 |   zoom(ratio: number): Cropper
30 |   zoomTo(ratio: number, pivot?: { x: number; y: number }): Cropper
31 | 
32 |   flipX(): void
33 |   flipY(): void
34 | }
35 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "compilerOptions": {
 5 |     "baseUrl": ".",
 6 |     "paths": {
 7 |       "@/*": ["./src/*"]
 8 |     }
 9 |   },
10 | 
11 |   "references": [
12 |     {
13 |       "path": "./tsconfig.config.json"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'url'
 2 | import { resolve } from 'path'
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import dts from 'vite-plugin-dts'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [
10 |     dts({
11 |       staticImport: true,
12 |       // skipDiagnostics: false,
13 |       // logDiagnostics: true,
14 |       insertTypesEntry: true,
15 |       rollupTypes: true
16 |     }),
17 |     vue()
18 |   ],
19 |   resolve: {
20 |     alias: {
21 |       '@': fileURLToPath(new URL('./src', import.meta.url))
22 |     }
23 |   },
24 |   build: {
25 |     lib: {
26 |       entry: resolve(__dirname, 'src/index.ts'),
27 |       name: 'VueCropper',
28 |       fileName: format => `index.${format}.js`
29 |     },
30 |     rollupOptions: {
31 |       // 确保外部化处理那些你不想打包进库的依赖
32 |       external: ['vue', 'cropperjs'],
33 |       output: {
34 |         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
35 |         globals: {
36 |           vue: 'Vue',
37 |           cropperjs: 'CropperJs'
38 |         }
39 |       }
40 |     }
41 |   }
42 | })
43 | 


--------------------------------------------------------------------------------