How to crop and preview form images in Vue
In front-end development, form submission is a common operation. Sometimes, we need to upload images, but the uploaded images may be very large, which will increase the burden on the server and reduce the user's experience. Therefore, we usually need to crop and preview the uploaded images. In Vue, we can use some third-party libraries to implement this function.
Use third-party libraries for image cropping
In Vue, we can use the third-party library vue-cropper to crop images. First, we need to install vue-cropper:
npm install vue-cropper --save
Then, introduce vue-cropper in the Vue component:
import VueCropper from 'vue-cropper'
Next, we can use vue-cropper's<vue-cropper>Tags to achieve image cropping:
<template>
<div>
<input type="file" @change="handleFileChange">
<vue-cropper ref="cropper" :img="img" :outputType="'png'"></vue-cropper>
<button @click="getCroppedImage">Get cropped images</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropper'
export default {
components: {
VueCropper
},
data () {
return {
img: ''
}
},
methods: {
handleFileChange (event) {
const file = [0]
const reader = new FileReader()
= (e) => {
=
}
(file)
},
getCroppedImage () {
this.$().toBlob((blob) => {
(blob)
})
}
}
}
</script>In the above code, we first define a tag. When the user selects the image, we convert the image to base64 format and save it in the img variable. We then use labels to display the image and allow the user to crop. Finally, when the user clicks the "Get cropped image" button, we can usethis.$().toBlob()Method to get the cropped image.
Use third-party libraries for image preview
In Vue, we can use the third-party library vue-image-crop-upload to preview the image. First, we need to install vue-image-crop-upload:
npm install vue-image-crop-upload --save
Then, introduce vue-image-crop-upload in the Vue component:
import VueImageCropUpload from 'vue-image-crop-upload'
Next, we can use vue-image-crop-upload in the Vue component<vue-image-crop-upload>Tags to implement preview of the image:
<template>
<div>
<vue-image-crop-upload
ref="cropUpload"
:preview-src="previewSrc"
:img-format="imgFormat"
:img-quality="imgQuality"
:crop-box-ratio="cropBoxRatio"
:crop-box-min-width="cropBoxMinWidth"
:crop-box-min-height="cropBoxMinHeight"
:crop-box-max-width="cropBoxMaxWidth"
:crop-box-max-height="cropBoxMaxHeight"
@crop-success="cropSuccess"
>
<button>Select a picture</button>
</vue-image-crop-upload>
</div>
</template>
<script>
import VueImageCropUpload from 'vue-image-crop-upload'
export default {
components: {
VueImageCropUpload
},
data () {
return {
previewSrc: '',
imgFormat: 'jpeg',
imgQuality: 0.8,
cropBoxRatio: 1,
cropBoxMinWidth: 100,
cropBoxMinHeight: 100,
cropBoxMaxWidth: 800,
cropBoxMaxHeight: 800
}
},
methods: {
cropSuccess (dataUrl) {
(dataUrl)
}
}
}
</script>In the code above, we use labels to display the image and allow the user to crop and preview. First, we defined some parameters, including the src of the preview image, the image format, the image quality, the scale and size of the cropping box, etc. Then, we define a @crop-success event. When the user completes the image crop, this event will be triggered and returns the base64 format data of the cropped image. Finally, we can submit this data to the server or perform other operations.
Combine image cropping and preview
In actual development, we usually need to combine image cropping and preview so that users can crop while previewing the image. Here is a sample code:
<template>
<div>
<vue-image-crop-upload
ref="cropUpload"
:preview-src="previewSrc"
:img-format="imgFormat"
:img-quality="imgQuality"
:crop-box-ratio="cropBoxRatio"
:crop-box-min-width="cropBoxMinWidth"
:crop-box-min-height="cropBoxMinHeight"
:crop-box-max-width="cropBoxMaxWidth"
:crop-box-max-height="cropBoxMaxHeight"
@crop-success="cropSuccess"
>
<button>Select a picture</button>
</vue-image-crop-upload>
<vue-cropper
ref="cropper"
:img="cropperImg"
:output-type="'png'"
v-if="showCropper"
></vue-cropper>
<button @click="showCropper = !showCropper">Switch cropping</button>
<button @click="getCroppedImage">Get cropped images</button>
</div>
</template>
<script>
import VueImageCropUpload from 'vue-image-crop-upload'
import VueCropper from 'vue-cropper'
export default {
components: {
VueImageCropUpload,
VueCropper
},
data () {
return {
previewSrc: '',
imgFormat: 'jpeg',
imgQuality: 0.8,
cropBoxRatio: 1,
cropBoxMinWidth: 100,
cropBoxMinHeight: 100,
cropBoxMaxWidth: 800,
cropBoxMaxHeight: 800,
cropperImg: '',
showCropper: false
}
},
methods: {
cropSuccess (dataUrl) {
= dataUrl
= dataUrl
},
getCroppedImage () {
if () {
this.$().toBlob((blob) => {
(blob)
})
} else {
this.$().toBlob((blob) => {
(blob)
})
}
}
}
}
</script>In the above code, we first define a label for preview and cropping of the image, and also define a label for cropping of the image. We then define a showCropper variable to control which tag is currently displayed. When the user clicks the "Toggle Cropping" button, we can switch the currently displayed label. Finally, when the user clicks the "Get cropped image" button, we can get the cropped image based on the currently displayed label.
Conclusion
Cropping and previewing form images in Vue is a common requirement. We can easily implement this functionality by using third-party libraries vue-cropper and vue-image-crop-upload. At the same time, we can also combine image cropping and preview to improve the user's experience.
The above is a detailed explanation of how to achieve form image cropping and preview in Vue. For more information about Vue form image cropping and preview, please pay attention to my other related articles!