Home > Article > Web Front-end > How to crop and rotate images in Vue?
How to crop and rotate images in Vue?
Overview:
In Vue development, we often encounter the need to crop and rotate images. This article will introduce how to use Vue and related plug-ins to implement image cropping and rotation functions, and comes with code examples.
Preparation work:
Before we start, we need to install and introduce the following two plug-ins:
Install dependencies:
First, in your Vue project directory, use the following command to install dependencies:
npm install vue-cropper vue-rotate --save
Use the vue-cropper plug-in to implement image cropping:
Introduce the vue-cropper plug-in into the components that need to use the image cropping function.
// MyComponent.vue <template> <div> <vue-cropper ref="cropper" :img="imgSrc" :output-type="outputType" :can-zoom="canZoom" :can-move="canMove" :center-box="centerBox" :show-remove-btn="showRemoveBtn" :support-ratio="supportRatio" :fixed-ratio="fixedRatio" ></vue-cropper> <button @click="crop">裁剪</button> </div> </template> <script> import VueCropper from 'vue-cropper'; export default { components: { VueCropper }, data() { return { imgSrc: '', // 图片路径 outputType: 'jpeg', // 输出类型 canZoom: true, // 是否可以缩放 canMove: true, // 是否可以移动 centerBox: true, // 是否居中显示 showRemoveBtn: true, // 是否显示删除按钮 supportRatio: [], // 图片比例限制 fixedRatio: false // 是否固定比例 } }, methods: { crop() { const croppedData = this.$refs.cropper.getCroppedCanvas().toDataURL(); // 获取裁剪后的图片数据 // 处理裁剪后的图片数据 } } }; </script>
In the above sample code, vue-cropper
img# of the component The ## attribute is used to specify the path of the image that needs to be cropped, and the
output-type attribute is used to specify the type of image output after cropping. Other properties are used to configure some functions of the cropping operation and are set according to actual needs.
vue-cropperThe
getCroppedCanvas method in the component can be used to obtain cropped image data. Call the
getCroppedCanvas method in the
crop method, and the cropped image data obtained can be subjected to other customized processing, such as saving to the server.
// MyComponent.vue <template> <div> <img :src="imgSrc" v-rotate:deg="rotatedDegree" / alt="How to crop and rotate images in Vue?" > <button @click="rotate">旋转</button> </div> </template> <script> import VueRotate from 'vue-rotate'; export default { directives: { Rotate: VueRotate }, data() { return { imgSrc: '', // 图片路径 rotatedDegree: 0 // 旋转角度 } }, methods: { rotate() { this.rotatedDegree += 90; // 每次点击旋转90度 } } }; </script>
img tag uses
v-rotate: The deg instruction is used to rotate the image. Among them, the
:src attribute is used to specify the image path that needs to be rotated, and
rotatedDegree is used to specify the rotation angle. In the
rotate method, every time the rotate button is clicked,
rotatedDegree will be increased by 90 degrees to achieve the rotation effect of the image.
This article introduces how to use related plug-ins in Vue to realize the cropping and rotating functions of images. By using the vue-cropper plug-in, you can crop the image; and using the vue-rotate plug-in, you can rotate the image. Readers can further customize and expand on this basis according to their actual needs.
The above is the detailed content of How to crop and rotate images in Vue?. For more information, please follow other related articles on the PHP Chinese website!