0
# Component Configuration
1

2
Comprehensive configuration options for the VueCropper component, controlling image display, cropping behavior, and output settings.
3

4
## Capabilities
5

6
### Image Source Configuration
7

8
Controls the source image and basic image handling properties.
9

10
```javascript { .api }
11
/**
12
 * Source image for cropping
13
 * @param img - Image source (URL, base64, Blob, or File object)
14
 */
15
img: string | Blob | File | null;
16

17
/**
18
 * Compression quality for output image
19
 * @param outputSize - Quality level from 0.1 to 1.0 (default: 1)
20
 */
21
outputSize: number;
22

23
/**
24
 * Output image format
25
 * @param outputType - Format: "jpeg", "png", or "webp" (default: "jpeg")
26
 */
27
outputType: string;
28

29
/**
30
 * Maximum image dimensions for processing
31
 * @param maxImgSize - Maximum width/height in pixels (default: 2000)
32
 */
33
maxImgSize: number | string;
34
```
35

36
**Usage Examples:**
37

38
```vue
39
<template>
40
  <!-- URL image -->
41
  <VueCropper :img="'https://example.com/image.jpg'" />
42
  
43
  <!-- File upload -->
44
  <VueCropper :img="selectedFile" :outputSize="0.8" :outputType="'png'" />
45
  
46
  <!-- Base64 image -->
47
  <VueCropper :img="'data:image/jpeg;base64,/9j/4AAQ...'" />
48
</template>
49

50
<script>
51
export default {
52
  data() {
53
    return {
54
      selectedFile: null
55
    };
56
  },
57
  methods: {
58
    handleFileUpload(event) {
59
      this.selectedFile = event.target.files[0];
60
    }
61
  }
62
};
63
</script>
64
```
65

66
### Cropping Box Configuration
67

68
Settings for the cropping area behavior and appearance.
69

70
```javascript { .api }
71
/**
72
 * Automatically generate crop box on image load
73
 * @param autoCrop - Enable auto crop box (default: false)
74
 */
75
autoCrop: boolean;
76

77
/**
78
 * Default crop box width
79
 * @param autoCropWidth - Width in pixels or 0 for 80% of container (default: 0)
80
 */
81
autoCropWidth: number | string;
82

83
/**
84
 * Default crop box height
85
 * @param autoCropHeight - Height in pixels or 0 for 80% of container (default: 0)
86
 */
87
autoCropHeight: number | string;
88

89
/**
90
 * Enable fixed aspect ratio for crop box
91
 * @param fixed - Lock aspect ratio (default: false)
92
 */
93
fixed: boolean;
94

95
/**
96
 * Aspect ratio when fixed is true
97
 * @param fixedNumber - [width, height] ratio (default: [1, 1])
98
 */
99
fixedNumber: [number, number];
100

101
/**
102
 * Lock crop box size to prevent resizing
103
 * @param fixedBox - Disable crop box resizing (default: false)
104
 */
105
fixedBox: boolean;
106

107
/**
108
 * Constrain crop box within image boundaries
109
 * @param centerBox - Keep crop box inside image (default: false)
110
 */
111
centerBox: boolean;
112

113
/**
114
 * Minimum crop area size constraint
115
 * @param limitMinSize - Minimum size in pixels or [width, height] (default: 10)
116
 */
117
limitMinSize: number | Array<number> | string;
118
```
119

120
**Usage Examples:**
121

122
```vue
123
<template>
124
  <!-- Auto crop with 16:9 aspect ratio -->
125
  <VueCropper
126
    :img="imageUrl"
127
    :autoCrop="true"
128
    :autoCropWidth="400"
129
    :autoCropHeight="225"
130
    :fixed="true"
131
    :fixedNumber="[16, 9]"
132
  />
133
  
134
  <!-- Fixed size crop box that cannot be resized -->
135
  <VueCropper
136
    :img="imageUrl"
137
    :autoCrop="true"
138
    :fixedBox="true"
139
    :autoCropWidth="200"
140
    :autoCropHeight="200"
141
  />
142
  
143
  <!-- Constrained crop box with minimum size -->
144
  <VueCropper
145
    :img="imageUrl"
146
    :centerBox="true"
147
    :limitMinSize="[50, 50]"
148
  />
149
</template>
150
```
151

152
### Display and Interaction Settings
153

154
Controls for user interaction and visual feedback.
155

156
```javascript { .api }
157
/**
158
 * Show crop box dimensions
159
 * @param info - Display width x height info (default: true)
160
 */
161
info: boolean;
162

163
/**
164
 * Show true output dimensions vs visual dimensions
165
 * @param infoTrue - Display actual output size (default: false)
166
 */
167
infoTrue: boolean;
168

169
/**
170
 * Enable mouse wheel zooming
171
 * @param canScale - Allow wheel zoom (default: true)
172
 */
173
canScale: boolean;
174

175
/**
176
 * Allow image dragging/panning
177
 * @param canMove - Enable image movement (default: true)
178
 */
179
canMove: boolean;
180

181
/**
182
 * Allow crop box dragging
183
 * @param canMoveBox - Enable crop box movement (default: true)
184
 */
185
canMoveBox: boolean;
186

187
/**
188
 * Render image at original aspect ratio
189
 * @param original - Use original proportions (default: false)
190
 */
191
original: boolean;
192

193
/**
194
 * Image rendering mode
195
 * @param mode - Fit mode: "contain", "cover", "100px", "100% auto" (default: "contain")
196
 */
197
mode: string;
198
```
199

200
**Usage Examples:**
201

202
```vue
203
<template>
204
  <!-- Read-only cropper with no user interaction -->
205
  <VueCropper
206
    :img="imageUrl"
207
    :canScale="false"
208
    :canMove="false"
209
    :canMoveBox="false"
210
    :info="false"
211
  />
212
  
213
  <!-- Cover mode with original aspect ratio -->
214
  <VueCropper
215
    :img="imageUrl"
216
    :mode="'cover'"
217
    :original="true"
218
    :infoTrue="true"
219
  />
220
</template>
221
```
222

223
### Output and Quality Settings
224

225
Configuration for the final cropped image output.
226

227
```javascript { .api }
228
/**
229
 * Output original image ratio crop
230
 * @param full - Maintain original proportions in output (default: false)
231
 */
232
full: boolean;
233

234
/**
235
 * Use device pixel ratio for high-DPI output
236
 * @param high - Enable high-resolution output (default: true)
237
 */
238
high: boolean;
239

240
/**
241
 * Output enlargement multiplier
242
 * @param enlarge - Scale factor for output size 0-1000 (default: 1)
243
 */
244
enlarge: number | string;
245

246
/**
247
 * Background fill color for transparent areas
248
 * @param fillColor - Hex color code for background (default: "")
249
 */
250
fillColor: string;
251
252
```
253

254
**Usage Examples:**
255

256
```vue
257
<template>
258
  <!-- High-quality output with 2x enlargement -->
259
  <VueCropper
260
    :img="imageUrl"
261
    :outputSize="1.0"
262
    :high="true"
263
    :enlarge="2"
264
    :fillColor="'#ffffff'"
265
  />
266
  
267
  <!-- Mobile-optimized lower quality -->
268
  <VueCropper
269
    :img="imageUrl"
270
    :outputSize="0.7"
271
    :high="false"
272
    :enlarge="1"
273
  />
274
  
275
</template>
276
```