Preface
The image cropping function, whether it is the cropping of user avatars or the precise adjustment of image content, has become a key part of improving user experience. Combined with this rich image cropping library, it can easily achieve efficient and intuitive image cropping functions. This article will explain in detail how to integrate and use it in a project to implement a powerful image cropping component.
Pre-work
First, we need to make sure that we have installed and . If you haven't installed them yet, you can install them via the following command:
# Install Vue CLInpm install -g @vue/cli # Create a new Vue projectvue create vue-cropper # Enter the project directorycd vue-cropper # Installnpm install cropperjs
Project structure
We will create a components folder in the src directory to store our components. Our main documents include:
- : Main application component
- components/: Image Cropping Components
Implementation steps
1.
First, we introduce and use the CropperComponent component in :
<template>
<div >
<h1> and Image cropping example</h1>
<CropperComponent />
</div>
</template>
<script>
import CropperComponent from './components/';
export default {
name: 'App',
components: {
CropperComponent
}
};
</script>
<style>
#app {
text-align: center;
margin-top: 50px;
}
</style>
2.
Next, we create the file in the components folder, which is where we implement the image cropping logic.
<template>
<div class="cropper-container">
<input type="file" @change="onFileChange" />
<div v-if="imageUrl">
<img ref="image" :src="imageUrl" alt="Source Image" />
<button @click="cropImage">Crop pictures</button>
<div v-if="croppedImageUrl">
<h3>Cropped pictures:</h3>
<img :src="croppedImageUrl" alt="Cropped Image" />
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/';
export default {
name: 'CropperComponent',
data() {
return {
imageUrl: null,
cropper: null,
croppedImageUrl: null
};
},
methods: {
onFileChange(event) {
const file = [0];
if (file && ('image/')) {
= (file);
this.$nextTick(() => {
if () {
();
}
= new Cropper(this.$, {
aspectRatio: 1,
viewMode: 1
});
});
}
},
cropImage() {
if () {
const canvas = ();
= ('image/png');
}
}
}
};
</script>
<style>
.cropper-container {
text-align: center;
}
.cropper-container img {
max-width: 100%;
}
</style>
explain
File selector: Through an element, the user can select the image file to be cropped.
Image preview and Cropper instantiation: When the user selects an image, we use the method to generate the URL of the image and assign it to imageUrl. Then, we create a Cropper instance in nextTick.
Image cropping: After clicking the "Crop Picture" button, we call the method to obtain the cropped image and convert it to a URL in base64 format.
Advanced usage
Our basic functions have been implemented, but in actual applications, you may need more features and a better user experience. Next, we will explore some common optimization and scaling methods.
1. Add crop ratio selection
Sometimes we need users to choose between multiple crop ratios, such as 1:1, 16:9, 4:3, etc. We can add a drop-down menu in .
<template>
<div class="cropper-container">
<input type="file" @change="onFileChange" />
<div v-if="imageUrl">
<select v-model="aspectRatio" @change="updateAspectRatio">
<option value="1">1:1</option>
<option value="16/9">16:9</option>
<option value="4/3">4:3</option>
<option value="NaN">Free proportion</option>
</select>
<img ref="image" :src="imageUrl" alt="Source Image" />
<button @click="cropImage">Crop pictures</button>
<div v-if="croppedImageUrl">
<h3>Cropped pictures:</h3>
<img :src="croppedImageUrl" alt="Cropped Image" />
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/';
export default {
name: 'CropperComponent',
data() {
return {
imageUrl: null,
cropper: null,
croppedImageUrl: null,
aspectRatio: 1
};
},
methods: {
onFileChange(event) {
const file = [0];
if (file && ('image/')) {
= (file);
this.$nextTick(() => {
if () {
();
}
();
});
}
},
initCropper() {
= new Cropper(this.$, {
aspectRatio: ,
viewMode: 1
});
},
updateAspectRatio() {
if () {
( === 'NaN' ? NaN : Number());
}
},
cropImage() {
if () {
const canvas = ();
= ('image/png');
}
}
}
};
</script>
<style>
.cropper-container {
text-align: center;
}
.cropper-container img {
max-width: 100%;
}
</style>
2. Process the cropped pictures
For cropped images, we may need to further process, such as uploading to the server or downloading to the local area. Here is a simple example showing how to download cropped images:
<template>
<div class="cropper-container">
<input type="file" @change="onFileChange" />
<div v-if="imageUrl">
<select v-model="aspectRatio" @change="updateAspectRatio">
<option value="1">1:1</option>
<option value="16/9">16:9</option>
<option value="4/3">4:3</option>
<option value="NaN">Free proportion</option>
</select>
<img ref="image" :src="imageUrl" alt="Source Image" />
<button @click="cropImage">Crop pictures</button>
<div v-if="croppedImageUrl">
<h3>Cropped pictures:</h3>
<img :src="croppedImageUrl" alt="Cropped Image" />
<a :href="croppedImageUrl" rel="external nofollow" download="">下载Cropped pictures</a>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/';
export default {
name: 'CropperComponent',
data() {
return {
imageUrl: null,
cropper: null,
croppedImageUrl: null,
aspectRatio: 1
};
},
methods: {
onFileChange(event) {
const file = [0];
if (file && ('image/')) {
= (file);
this.$nextTick(() => {
if () {
();
}
();
});
}
},
initCropper() {
= new Cropper(this.$, {
aspectRatio: ,
viewMode: 1
});
},
updateAspectRatio() {
if () {
( === 'NaN' ? NaN : Number());
}
},
cropImage() {
if () {
const canvas = ();
= ('image/png');
}
}
}
};
</script>
<style>
.cropper-container {
text-align: center;
}
.cropper-container img {
max-width: 100%;
}
</style>
3. Upload the picture to the server
If you want to upload the cropped image to the server, you can use axios or native fetch methods such as. Here is a simple example:
# Install axiosnpm install axios
<template>
<div class="cropper-container">
<input type="file" @change="onFileChange" />
<div v-if="imageUrl">
<select v-model="aspectRatio" @change="updateAspectRatio">
<option value="1">1:1</option>
<option value="16/9">16:9</option>
<option value="4/3">4:3</option>
<option value="NaN">Free proportion</option>
</select>
<img ref="image" :src="imageUrl" alt="Source Image" />
<button @click="cropImage">Crop pictures</button>
<div v-if="croppedImageUrl">
<h3>Cropped pictures:</h3>
<img :src="croppedImageUrl" alt="Cropped Image" />
<button @click="uploadImage">上传Cropped pictures</button>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/';
import axios from 'axios';
export default {
name: 'CropperComponent',
data() {
return {
imageUrl: null,
cropper: null,
croppedImageUrl: null,
aspectRatio: 1
};
},
methods: {
onFileChange(event) {
const file = [0];
if (file && ('image/')) {
= (file);
this.$nextTick(() => {
if () {
();
}
();
});
}
},
initper() {
= new Cropper(this.$, {
aspectRatio: ,
viewMode: 1
});
},
updateAspectRatio() {
if () {
( === 'NaN' ? NaN : Number());
}
},
cropImage() {
if () {
const canvas = ();
= ('image/png');
}
},
async uploadImage() {
if () {
const formData = new FormData();
const blob = await fetch().then(res => ());
('croppedImage', blob, '');
try {
const response = await ('YOUR_UPLOAD_URL', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
('Uploaded successfully:', );
} catch (error) {
('Upload failed:', error);
}
}
}
}
};
</script>
<style>
.cropper-container {
text-align: center;
}
.cropper-container img {
max-width: 100%;
}
</style>
In the above example, we use axios to upload the cropped image to the server. Make sure to replace YOUR_UPLOAD_URL with the actual upload URL.
4. Image rotation and zoom
In addition to cropping images, users sometimes need to rotate and scale images. The corresponding methods are provided to handle these operations. You can add buttons to the component to call these methods.
<template>
<div class="cropper-container">
<input type="file" @change="onFileChange" />
<div v-if="imageUrl">
<select v-model="aspectRatio" @change="updateAspectRatio">
<option value="1">1:1</option>
<option value="16/9">16:9</option>
<option value="4/3">4:3</option>
<option value="NaN">Free proportion</option>
</select>
<img ref="image" :src="imageUrl" alt="Source Image" />
<div>
<button @click="rotateImage(-90)">Rotate left</button>
<button @click="rotateImage(90)">Rotate right</button>
<button @click="zoomImage(0.1)">enlarge</button>
<button @click="zoomImage(-0.1)">Shrink</button>
</div>
<button @click="cropImage">Crop pictures</button>
<div v-if="croppedImageUrl">
<h3>Cropped pictures:</h3>
<img :src="croppedImageUrl" alt="Cropped Image" />
<button @click="uploadImage">上传Cropped pictures</button>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/';
import axios from 'axios';
export default {
name: 'CropperComponent',
data() {
return {
imageUrl: null,
cropper: null,
croppedImageUrl: null,
aspectRatio: 1
};
},
methods: {
onFileChange(event) {
const file = [0];
if (file && ('image/')) {
= (file);
this.$nextTick(() => {
if () {
();
}
();
});
}
},
initCropper() {
= new Cropper(this.$, {
aspectRatio: ,
viewMode: 1
});
},
updateAspectRatio() {
if () {
( === 'NaN' ? NaN : Number());
}
},
rotateImage(degree) {
if () {
(degree);
}
},
zoomImage(ratio) {
if () {
(ratio);
}
},
cropImage() {
if () {
const canvas = ();
= ('image/png');
}
},
async uploadImage() {
if () {
const formData = new FormData();
const blob = await fetch().then(res => ());
('croppedImage', blob, '');
try {
const response = await ('YOUR_UPLOAD_URL', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
('Uploaded successfully:', );
} catch (error) {
('Upload failed:', error);
}
}
}
}
};
</script>
<style>
.cropper-container {
text-align: center;
}
.cropper-container img {
max-width: 100%;
}
.cropper-container button {
margin: 5px;
}
</style>
Summarize
Through this article's detailed explanation, you should have mastered how to integrate and use powerful image cropping components in your project. We not only introduce the basic image cropping implementation, but also show how to expand the functions to support cropping scale selection, image rotation and scaling, and upload processing of cropped images. This component can be used as an important module in your project to enhance the user experience.
This is the end of this article about Vue using Cropper to implement image cropping function. For more related Vue Cropper image cropping content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!