详解ionic本地相册、拍照、裁剪、上传（单图完全版）

详解Ionic本地相册、拍照、裁剪、上传（单图完全版）

本文将详细介绍如何在Ionic项目中实现本地相册、拍照、裁剪、上传的功能，主要介绍以下步骤：

1. 安装插件
2. 导入插件
3. 修改config.xml文件
4. 实现功能的代码
5. 编译打包

安装插件

我们需要安装以下插件：

cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-crop

导入插件

在我们的页面中，需要导入以下插件的依赖：

import { Camera, CameraOptions } from '@ionic-native/camera';
import { File, Entry } from '@ionic-native/file';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { Crop } from '@ionic-native/crop';

修改config.xml文件

确保我们在config.xml文件中正确配置了拍照和相册访问的权限:

<plugin name="cordova-plugin-camera" spec="~4.0.3">
  <variable name="CAMERA_USAGE_DESCRIPTION" value="需要使用相机" />
  <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="需要访问图库" />
</plugin>

实现功能的代码

为了实现选取图片并上传，我们需要完成以下步骤：

1. 打开相册或使用相机拍照
2. 对图片进行裁剪
3. 将裁剪后的图片上传到服务器

export class HomePage {
  private options: CameraOptions = {
    quality: 50, // 图片质量 0 - 100
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY // 打开相册
    // sourceType: this.camera.PictureSourceType.CAMERA // 使用相机拍照
  };

  constructor(
    private camera: Camera,
    private file: File,
    private crop: Crop,
    private transfer: FileTransfer
  ) {}

  public pickImage() {
    this.camera.getPicture(this.options).then(
      (imageUri) => {
        this.crop.crop(imageUri, { quality: 50 }).then(
          (croppedImage) => {
            this.uploadImage(croppedImage);
          },
          (err) => {
            console.error(`Error cropping image: ${err}`);
          }
        );
      },
      (err) => {
        console.error(`Error taking picture: ${err}`);
      }
    );
  }

  private uploadImage(imagePath: string) {
    const fileTransfer: FileTransferObject = this.transfer.create();
    const serverUrl = 'http://localhost:3000/upload';
    const options = {
      fileKey: 'photoFile',
      headers: { Authorization: 'Bearer ' + localStorage.getItem('token') }
    };

    this.file.resolveLocalFilesystemUrl(imagePath).then(
      (fileEntry: Entry) => {
        fileEntry.file((file) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            const imgBlob = new Blob([reader.result], { type: file.type });
            fileTransfer.upload(imagePath, serverUrl, options).then(
              (res) => {
                console.log('Upload success!');
              },
              (err) => {
                console.error(`Error uploading image: ${err}`);
              }
            );
          };
          reader.readAsArrayBuffer(file);
        });
      },
      (err) => {
        console.error(`Error resolving image path: ${err}`);
      }
    );
  }
}

编译打包

最后别忘了进行编译和打包，我们在终端中输入以下命令：

ionic build --prod --release

此时，我们的Ionic应用就可以实现本地相册、拍照、裁剪、上传的功能了。

示例说明

示例1：从相册选取并上传图片

在页面上添加一个按钮，绑定pickImage()函数，即可打开相册。

<ion-button (click)="pickImage()">从相册选取</ion-button>

示例2：使用相机拍照并上传图片

我们只需要将options对象中的sourceType设为this.camera.PictureSourceType.CAMERA，即可打开相机拍照。

<ion-button (click)="takePicture()">拍照上传</ion-button>

private takePicture() {
  const cameraOptions: CameraOptions = {
    quality: 50, // 图片质量 0 - 100
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.CAMERA // 使用相机拍照
  };

  this.camera.getPicture(cameraOptions).then(
    (imageUri) => {
      this.crop.crop(imageUri, { quality: 50 }).then(
        (croppedImage) => {
          this.uploadImage(croppedImage);
        },
        (err) => {
          console.error(`Error cropping image: ${err}`);
        }
      );
    },
    (err) => {
      console.error(`Error taking picture: ${err}`);
    }
  );
}