博客站

在 UniApp 中，图片裁剪是常见的需求之一，例如用户头像上传、图片编辑等场景。UniApp 提供了 uni.chooseImage 和 uni.compressImage API 来实现图片选择和压缩，但原生 API 并不直接支持图片裁剪。以下是 UniApp 处理图片裁剪的常用方法：

一、使用 uni.chooseImage 和 uni.compressImage

虽然 UniApp 没有直接提供图片裁剪功能，但可以通过 uni.chooseImage 选择图片后，使用 uni.compressImage 进行压缩，再结合第三方库实现裁剪。

1. 选择图片

• 示例：

  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      console.log('选择的图片路径：', tempFilePath);
    }
  });
  

2. 压缩图片

• 示例：

  uni.compressImage({
    src: tempFilePath,
    quality: 80, // 压缩质量（0-100）
    success: (compressRes) => {
      console.log('压缩后的图片路径：', compressRes.tempFilePath);
    }
  });
  

二、使用第三方图片裁剪库

如果需要实现图片裁剪功能，可以使用第三方图片裁剪库，如 cropperjs。

1. 安装 cropperjs

• 安装 cropperjs：

  npm install cropperjs
  

2. 在 UniApp 中使用

• 示例：

  <template>
    <view>
      <image :src="imageSrc" ref="image" style="width: 100%; height: 300px;"></image>
      <button @click="cropImage">裁剪图片</button>
    </view>
  </template>
  
  <script>
  import Cropper from 'cropperjs';
  import 'cropperjs/dist/cropper.css';
  
  export default {
    data() {
      return {
        imageSrc: 'https://example.com/image.jpg'
      };
    },
    mounted() {
      this.cropper = new Cropper(this.$refs.image, {
        aspectRatio: 1, // 裁剪比例（1:1）
        viewMode: 1 // 裁剪模式
      });
    },
    methods: {
      cropImage() {
        const canvas = this.cropper.getCroppedCanvas();
        canvas.toBlob((blob) => {
          const reader = new FileReader();
          reader.onload = () => {
            this.imageSrc = reader.result;
          };
          reader.readAsDataURL(blob);
        });
      }
    }
  };
  </script>
  

三、手动实现图片裁剪

如果需要更灵活的控制，可以手动实现图片裁剪。

1. 使用 Canvas 裁剪图片

• 示例：

  function cropImage(image, x, y, width, height) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(image, x, y, width, height, 0, 0, width, height);
    return canvas.toDataURL('image/jpeg');
  }
  
  const image = new Image();
  image.src = 'https://example.com/image.jpg';
  image.onload = () => {
    const croppedImage = cropImage(image, 100, 100, 200, 200);
    console.log('裁剪后的图片：', croppedImage);
  };
  

四、总结

UniApp 处理图片裁剪的步骤如下：

1. 使用 uni.chooseImage 和 uni.compressImage：通过 uni.chooseImage 选择图片后，使用 uni.compressImage 进行压缩。
2. 使用第三方图片裁剪库：通过 cropperjs 实现图片裁剪功能。
3. 手动实现图片裁剪：通过 Canvas 实现灵活的图片裁剪。

以下是一个完整的 cropperjs 示例：

<template>
  <view>
    <image :src="imageSrc" ref="image" style="width: 100%; height: 300px;"></image>
    <button @click="cropImage">裁剪图片</button>
  </view>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  },
  mounted() {
    this.cropper = new Cropper(this.$refs.image, {
      aspectRatio: 1, // 裁剪比例（1:1）
      viewMode: 1 // 裁剪模式
    });
  },
  methods: {
    cropImage() {
      const canvas = this.cropper.getCroppedCanvas();
      canvas.toBlob((blob) => {
        const reader = new FileReader();
        reader.onload = () => {
          this.imageSrc = reader.result;
        };
        reader.readAsDataURL(blob);
      });
    }
  }
};
</script>

通过合理使用这些方法，可以轻松实现 UniApp 中的图片裁剪功能，满足应用的需求。