XCropper

An image cropper and uploader component for VueJS with Vuetify

X-Cropper Demo

---

Installation

NPM

1npm install x-cropper

YARN

1yarn add x-cropper

UI

Usage

Most basic example. This is going to insert the cropper with default options:

1
2<template>
3  <div>
4    <h1>XCropper - crop all!</h1>
5    <x-cropper></x-cropper>
6  </div>
7</template>
8<script>
9import XCropper from 'x-cropper'
10import 'x-cropper/dist/XCropper.css'
11
12export default {
13  components: {XCropper}
14}
15</script>

Example with all the options and events:

1
2<template>
3  <div>
4    <h1>XCropper - crop all!</h1>
5    <x-cropper
6        :options="{
7            // system
8            inputMimeTypes: ['image/jpeg', 'image/png', 'image/gif'],
9            resultMimeType: 'image/jpeg',
10            maxFileSize: 8000000, // 8MB
11            layoutBreakpoint: 850,
12            maxCropperHeight: 600,
13            croppedAreaHeight: 400,
14            croppedAreaWidth: 400,
15            maxCroppedAreaWidth: 400,
16            uploadData: {},
17    
18            isUploadTo: false,
19            isPreviewOnDrag: true,
20            isCloseOnSave: true,
21    
22            // show flags
23            isShowPreview: true,
24            isShowToolbar: true,
25            isShowSaveBtn: true,
26            isShowClearBtn: true,
27            isShowCircleChk: true,
28            isShowQualityFld: true,
29            isShowFormParams: true,
30            isShowFullAreaBtn: true,
31            isShowFlipVertBtn: true,
32            isShowFlipHorizBtn: true,
33            isShowSelectImgBtn: true,
34            isShowExpansionPnl: true,
35            isShowRotateLeftBtn: true,
36            isShowAspectRatioFld: true,
37            isShowRotateRightBtn: true,
38            isShowProportionalChk: true,
39    
40            cropArea: {
41              minWidth: 8,
42              minHeight: 8,
43    
44              // user changeable fields
45              width: 0,
46              height: 0,
47              x: 20,
48              y: 20,
49            },
50    
51            // user changeable checks
52            isCircle: true,
53            isProportional: false,
54    
55    
56            // user changeable fields
57            rotation: 0,
58            quality: 0.85,
59            handleSize: 10,
60            aspectRatio: 1,
61            maxCropAreaHeight: 0,
62            frameLineDash: [5, 3],
63            
64    
65            // colors
66            overlayFill: 'rgba(0, 0, 0, 0.5)',
67            handleFillColor: 'rgba(255, 255, 255, 0.2)',
68            frameStrokeColor: 'rgba(255, 255, 255, 0.8)',
69            handleStrokeColor: 'rgba(255, 255, 255, 0.8)',
70            handleHoverFillColor: 'rgba(255, 255, 255, 0.4)',
71            handleHoverStrokeColor: 'rgba(255, 255, 255, 1)',
72    
73            // style classes
74            cropperClasses: '',
75            toolbarClasses: '',
76            cropAreaClasses: '',
77            formParamsClasses: '',
78    
79            // labels
80    
81            clearLabel: 'Clear',
82            circleLabel: 'Circle',
83            previewLabel: 'Preview',
84            qualityLabel: 'Quality',
85            saveLabel: 'Save image',
86            cropAreaWidthLabel: 'Width',
87            cropAreaHeightLabel: 'Height',
88            cropAreaLabel: 'Cropper area',
89            rotateLeftLabel: 'Rotate left',
90            fullCropAreaLabel: 'Full area',
91            selectBtnLabel: 'Select image',
92            aspectRatioLabel: 'Aspect ratio',
93            rotateRightLabel: 'Rotate right',
94            cropParamsLabel: 'Cropper params',
95            proportionalLabel: 'Proportional',
96            flipVerticalLabel: 'Flip vertical',
97            cropAreaYCoordLabel: 'Y coordinate',
98            cropAreaXCoordLabel: 'X coordinate',
99            flipHorizontalLabel: 'Flip horizontal',
100            dropareaLabel: 'Select or drop image...',
101        }"
102        
103        @cropper-error="someAction(errorMessage)"
104        @cropper-file-selected="someAction(file)"
105        @cropper-preview="someAction(imageSource)"
106        @cropper-saved="someAction(cropData)"
107        @cropper-cancelled="someAction()"
108        @cropper-uploaded="someAction(serverResponse)"
109    ></x-cropper>
110  </div>
111</template>
112<script>
113import XCropper from 'x-cropper'
114import 'x-cropper/dist/XCropper.css'
115
116export default {
117  name: 'XCropper',
118  components: {XCropper}
119}
120</script>