Implementación front-end del esquema de recorte de imágenes.

prefacio

Usando el fin de semana dos días, hice una función de recorte de imágenes y una función de vista previa. La mayoría de los esquemas de recorte de imágenes de front-end están encapsulados con cropperjs. Hay vue-cropperjs en npm que se puede usar directamente. Viewerjs se usa para realizar imágenes El vista previa, aquí se usa directamente v-viewer para lograr.

recorte de imagen

El proceso de recorte de imagen.

Primero use el componente el-upload para renderizar la imagen existente o recortada
Haga clic en Cargar archivo, seleccione la imagen que desea recortar
Aparece un cuadro emergente y se usa vue-cropperjs en el cuadro emergente para realizar el recorte de imágenes
Después de completar el recorte, cargue el archivo de imagen procesado (formato Blob) en el servidor o obtenga una vista previa localmente a través de la función de devolución de llamada
Lista de imágenes recortadas, haga clic en vista previa de pantalla completa a través de v-viewer (asistencia)

El uso de vue-cropperjs

Código

Primero registre el componente VueCropper en el componente
Los componentes se pueden usar directamente a través de la etiqueta vue-cropper
Después de configurar this.$refs.cropper.setAspectRatio(1), la imagen solo se puede recortar de acuerdo con una cierta proporción. Si desea recortar a voluntad, no puede configurarlo
A través de this.$refs.cropper.relativeZoom, this.onRotateDegreeChange, this.$refs.cropper.move, this.$refs.cropper.scaleX y otras API, puede desplazarse, hacer zoom, voltear, rotar, etc.
Obtenga el archivo de formato Blob de la imagen procesada a través de this.$refs.cropper.getCroppedCanvas().toBlob()
Después de que el archivo de formato Blob se procese en formato de archivo, cárguelo en el servidor

// 引入组件并注册
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";

// 直接使用组件
<vue-cropper
  overflow-hidden
  ref="cropper"
  :src="src"
  preview=".preview"
  :minContainerHeight="500"
  background
  :ready="onReady"
/>

// 图片可以在onReady方法中设置裁剪的宽高比例
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

// 缩放图片
this.$refs.cropper.relativeZoom(percent);

// 图片旋转角度
this.onRotateDegreeChange(this.rotateDegree);

// 图片平移
this.$refs.cropper.move(offsetX, offsetY);

// 图片翻转
this.$refs.cropper.scaleX(scale);
this.$refs.cropper.scaleY(scale);

// 重置
this.$refs.cropper.reset();

// 获取修改后的图片的数据
  this.$refs.cropper
      .getCroppedCanvas({
        // 限制画布大小，限制生成的图片体积
        maxWidth: 2056,
        maxHeight: 2056,
      })
      .toBlob(
        (blob) => {
          // 调用确定的回调函数，将blob上传到服务器或者本地预览
          this.$emit("confirm", blob);
        },
        // 如果旋转角度不为直角，则图片一定会出现空白区域，空白区域默认透明，使用 png 格式
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        // 质量
        this.quality
      );
      
// 将文件上传到服务器
function onCropperConfirm(blob) {
    let file = new File([blob], filename, { type: blob.type,});
     const formData = new FormData();
     formData.append("file", file);
     // ...
     axios.post("/upload", formData).then((res) => {
          // ...
     })
}

复制代码

lograr efecto

Uso de v-viewer

Código

v-viewer implementa principalmente una vista previa de imágenes en pantalla completa, basada en la encapsulación de viewerjs

Primero introduzca css y registre el complemento v-viewer en main.js
En la página, se puede llamar directamente a través de this.$viewerApi, y la matriz de rutas de imagen y el índice correspondiente se pueden pasar para realizar la imagen de vista previa de pantalla completa.

// 首先在main.js中引入组件
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
Vue.use(VueViewer);

// 组件中使用
this.$viewerApi({
    options: {
      toolbar: true,
      initialViewIndex: 1,
    },
    images: [
        "https://placem.at/people?random=1&txt=0&w=500&h=500",
        "https://placem.at/people?random=1&txt=0&w=1000&h=500"
    ],
});
复制代码

lograr efecto

Referencias

1. www.npmjs.com/package/vv...

2. www.npmjs.com/package/vue…

finalmente

Si el recorte de imágenes se implementa mediante complementos, solo se puede decir que los ingenieros de CV no deberían ser demasiado geniales. Si desea comprender el principio, aún necesita dedicar mucho tiempo a la investigación; finalmente, si este artículo es útil para ti, por favor dale me gusta ~