repository·main·Indexed 26 days ago
https://github.com/xyxiao001/vue-cropperAn image cropping plugin for Vue.js applications (version 0.6.5) that allows users to crop, rotate, and scale images with real-time previews. It supports both Vue 2 and Vue 3, providing a set of props for configuration, event callbacks for movement and loading, and methods for extracting crop data as Base64 or Blob. For Vue 3 projects, the author recommends using cropper-next-vue.
For Vue 2 projects, you can import the component locally or register it globally.
Local Import:
import { VueCropper } from 'vue-cropper'
// In component options:
components: {
VueCropper
}Global Registration:
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)import { VueCropper } from 'vue-cropper'
components: {
VueCropper
}You can install vue-cropper using either npm or yarn to add the picture clipping plugin to your Vue project.
npm install vue-cropper
yarn add vue-cropperDepending on your setup, you can register vue-cropper globally in main.js or locally within a specific component.
Global Registration (main.js):
import VueCropper from "vue-cropper"
Vue.use(VueCropper)Local Registration (Component):
import { VueCropper } from "vue-cropper"
export default {
components: {
VueCropper,
},
}CDN Usage:
<script src="vuecropper.js"></script>
<script>
Vue.use(window['vue-cropper'])
</script>import { VueCropper } from "vue-cropper"
components: {
VueCropper,
},
main.js
import VueCropper from "vue-cropper"
Vue.use(VueCropper)Because vue-cropper relies on browser APIs, you must disable Server-Side Rendering (SSR) for the plugin in Nuxt.js.
In your nuxt.config.js:
module.exports = {
build: {
vendor: [
'vue-cropper'
],
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}module.exports = {
...
build: {
vendor: [
'vue-cropper
...
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}For Vue 3 projects, you can import the component locally or register it globally. Ensure you also import the required CSS.
Local Import:
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";Global Registration:
import VueCropper from 'vue-cropper';
import 'vue-cropper/dist/index.css'
const app = createApp(App)
app.use(VueCropper)
app.mount('#app')You can install vue-cropper using npm or yarn.
Note: If you are using Vue 3, it is recommended to use the newer repository cropper-next-vue.
# npm 安装
npm install vue-cropper
# yarn 安装
yarn add vue-cropperThe vue-cropper component accepts several props to control its behavior.
Important Requirements:
| Name | Function | Default | Options |
|---|---|---|---|
img | Image source URL | empty | url, base64, blob |
outputSize | Output image quality | 1 | 0.1 ~ 1 |
outputType | Output image format | jpg | jpeg, png, webp |
info | Show crop box info | true | true, false |
canScale | Allow mouse wheel scaling | true | true, false |
autoCrop | Default to generating crop box | false | true, false |
autoCropWidth | Default crop box width | 80% of container | 0 ~ max |
autoCropHeight | Default crop box height | 80% of container | 0 ~ max |
fixed | Fixed aspect ratio | false | true, false |
fixedNumber | Aspect ratio (if fixed is true) | [1, 1] | [width, height] |
full | Output original aspect ratio | false | true, false |
fixedBox | Lock crop box size | false | true, false |
canMove | Allow moving image | true | true, false |
canMoveBox | Allow moving crop box | true | true, false |
original | Render image at original scale | false | true, false |
centerBox | Restrict crop box to image area | false | true, false |
high | Output image based on device DPR | true | true, false |
infoTrue | Show real output size vs visible size | false | true, false |
maxImgSize | Max image width/height limit | 2000 | 0 ~ max |
enlarge | Output scale multiplier | 1 | 0 ~ max |
mode | Default rendering mode | contain | contain, cover, 100px, 100% auto |
limitMinSize | Minimum crop area limit | 10 | Number, Array, String |
fillColor | Background color for export | empty | #ffffff, white |
VueCropper globally in your Vue 2 application by using the install method provided in the default export. This registers the VueCropper component globally under the name 'VueCropper'.VueCropper globally in your Vue application using the globalCropper object. This registers the VueCropper component under the name VueCropper.vue-cropper globally in your Vue application using the globalCropper object. This provides an install method compatible with Vue's plugin system, allowing you to register the component globally via app.use(globalCropper).Use the @realTime event to get real-time preview data. The callback provides an object containing the preview URL, dimensions, and CSS styles for the preview container and image.
Example Implementation:
<vue-cropper
@realTime="realTime"
:img="option.img"
></vue-cropper>
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>realTime (data) {
this.previews = data
}```html
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="option.img" :style="previews.img">
</div>
</div>The component provides several event callbacks:
@realTime: Emitted during real-time preview. Returns an object containing the width (w) and height (h) of the crop area.@imgMoving: Emitted when the image is being moved. Returns an object with moving: boolean and axis coordinates (x1, x2, y1, y2).@cropMoving: Emitted when the crop box is being moved. Returns an object with moving: boolean and axis coordinates (x1, x2, y1, y2).@imgLoad: Emitted when the image finishes loading. Returns success or error.