uniapp implémente comment utiliser la bibliothèque de recadrage et de compression d'images pour implémenter des fonctions de traitement d'image

uniapp implémente comment utiliser la bibliothèque de recadrage et de compression d'images pour implémenter des fonctions de traitement d'image

Lors du développement d'applications mobiles, des exigences de traitement d'image sont souvent impliquées, telles que le recadrage et la compression d'images. En réponse à ces besoins, uniapp propose une multitude de plug-ins et de composants, permettant aux développeurs d'implémenter facilement des fonctions de traitement d'images. Cet article expliquera comment utiliser la bibliothèque de recadrage et de compression d'images dans uniapp pour implémenter des fonctions de traitement d'image et fournira des exemples de code correspondants.

1. Recadrage d'image

Le recadrage d'image signifie découper une partie de l'image selon les besoins. Le plug-in de recadrage d'image couramment utilisé dans Uniapp est "uniCropper". Voici un exemple de code pour utiliser uniCropper pour implémenter le recadrage d'image :

<template>
  <view>
    <image :src="imageSrc" mode="aspectFit" @tap="chooseImage"></image>
    <uni-cropper
      ref="cropper"
      :src="imageSrc"
      :styleType="styleType"
      :aspectRatio="aspectRatio"
      :minCropBoxWidth="minCropBoxWidth"
      :minCropBoxHeight="minCropBoxHeight"
      :maxCropBoxWidth="maxCropBoxWidth"
      :maxCropBoxHeight="maxCropBoxHeight"
      @ready="ready"
      @crop="crop"
    ></uni-cropper>
    <button @click="cropImage">裁剪</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageSrc: '',
        styleType: 1,
        aspectRatio: 1,
        minCropBoxWidth: 50,
        minCropBoxHeight: 50,
        maxCropBoxWidth: 200,
        maxCropBoxHeight: 200
      };
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          success: (res) => {
            this.imageSrc = res.tempFilePaths[0];
          }
        });
      },
      ready() {
        this.$refs.cropper.setDragMode('crop');
      },
      crop(e) {
        console.log('裁剪结果：', e.detail);
      },
      cropImage() {
        this.$refs.cropper.crop();
      }
    }
  };
</script>

Dans l'exemple de code ci-dessus, le composant "uniCropper" est d'abord introduit et la balise "uni-cropper" est utilisée dans la balise de modèle. En cliquant sur la méthode "chooseImage", vous pouvez sélectionner une image, et l'image sélectionnée sera affichée dans la balise d'image. Ensuite, en spécifiant divers attributs de la balise uni-cropper, la configuration du cadre de recadrage est réalisée. Après avoir cliqué sur le bouton de recadrage, la méthode cropImage sera déclenchée, la méthode $refs.cropper.crop() sera appelée pour effectuer le recadrage et le résultat du recadrage sera obtenu via la méthode de recadrage.

2. Compression d'image

La compression d'image fait référence à l'économie d'espace de stockage et à l'amélioration de la vitesse de transmission du réseau en réduisant la taille du fichier des images. Le plug-in de compression d'image couramment utilisé dans Uniapp est "uni.compressImage". Voici un exemple de code qui utilise uni.compressImage pour implémenter la compression d'image :

//选择图片并压缩
uni.chooseImage({
  success: (res) => {
    let tempFilePath = res.tempFilePaths[0];
    uni.compressImage({
      src: tempFilePath,
      quality: 80,   // 压缩质量，取值范围为0-100
      success: (res) => {
        let compressedFilePath = res.tempFilePath;
        // 在这里可以处理压缩后的图片
        console.log(compressedFilePath);
      }
    });
  }
});

Dans l'exemple de code ci-dessus, une image est sélectionnée via la méthode uni.chooseImage et l'image est compressée via uni.compressImage. La qualité de la compression peut être définie en spécifiant l'attribut de qualité, qui va de 0 à 100. Une fois la compression réussie, le chemin de l'image compressée peut être obtenu via la fonction de rappel de réussite et l'image peut être traitée dans la fonction de rappel.

Avec l'exemple de code ci-dessus, nous pouvons implémenter les fonctions de recadrage et de compression d'image dans uniapp. Selon les besoins spécifiques, les attributs et paramètres correspondants peuvent être configurés pour obtenir différents effets de traitement. La fonction de traitement d'image propose un large éventail de scénarios d'application en développement réel. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!