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:

1. vue-cropper: a Vue-based image cropping plug-in that can be used Implement operations such as cropping and rotating images.
2. vue-rotate: A Vue instruction used to implement the image rotation function.

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:

1. Introduce the vue-cropper plug-in:

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>

2. Use the vue-cropper plug-in for cropping:

In the above sample code, vue-cropperimg# 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.

Introduce the vue-rotate plug-in:

// 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>

Use the vue-rotate plugin for rotation:

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!