ionic5 相机相关的插件

拍照上传

安装插件

相机插件
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera

文件插件， 默认情况下先不引入，因为后面会报错
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

文件上传插件
ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/file-transfer

app.module.ts

import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import {FileTransfer} from '@ionic-native/file-transfer/ngx';

修改providers中添加：

Camera,
File,
FileTransfer,

使用地方

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';




constructor(private camera: Camera,private transfer: FileTransfer) { }



 // 拍照
    imgUpload() {
      const options: CameraOptions = {
          quality: 100,   // 图片质量
          destinationType: this.camera.DestinationType.FILE_URI, // 返回类型 .FILE_URI 返回文件地址 .DATA_URL 返回base64编码
          encodingType: this.camera.EncodingType.JPEG, // 图片格式 JPEG=0 PNG=1
          mediaType: this.camera.MediaType.PICTURE, // 媒体类型
          sourceType: this.camera.PictureSourceType.CAMERA, // 图片来源  CAMERA相机 PHOTOLIBRARY 图库
          allowEdit: true, // 允许编辑
          targetWidth: 300, // 缩放图片的宽度
          targetHeight: 300, // 缩放图片的高度
          saveToPhotoAlbum: false, // 是否保存到相册
          correctOrientation: true, // 设置摄像机拍摄的图像是否为正确的方向
      };

      this.camera.getPicture(options).then((imageData) => {
          // 返回拍照的地址
          this.doUpload(imageData);
      }, (err) => {
          alert(err);
      });
  }


  // 文件上传
  doUpload(src: any) {
    const fileTransfer: FileTransferObject = this.transfer.create();

    const options: FileUploadOptions = {
        fileKey: 'file',
        fileName: 'name.jpg',
        mimeType: 'image/jpeg',
        httpMethod: 'POST',
        params: { username : '张三'},
        headers: {}
    };

    const api = 'http://127.0.0.1/imgupload';

    fileTransfer.upload(src, encodeURI(api), options)
    .then((data) => {
        alert(JSON.stringify(data));
    }, (err) => {
        alert(JSON.stringify(err));
    });
  }

https://ionicframework.com/docs/native/camera/

相册

安装插件

ionic cordova plugin add cordova-plugin-telerik-imagepicker

npm install @ionic-native/image-picker

app.module.ts

import { ImagePicker   } from '@ionic-native/image-picker/ngx';

修改providers中添加：

ImagePicker,

https://ionicframework.com/docs/native/image-picker/

汉化

platforms\android\app\src\main\res 目录下

增加values-zh 文件，新建  multiimagechooser_strings_hu.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="multi_app_name">图片选择器</string>
    <string name="free_version_label">还可以选择 %d 张图片</string>
    <string name="error_database">打开图像数据库时出错,请反馈问题.</string>
    <string name="requesting_thumbnails">请求缩略图，请耐心等待</string>
    <string name="multi_image_picker_processing_images_title">正在处理...</string>
    <string name="multi_image_picker_processing_images_message">请稍等...</string>
    <string name="discard" translatable="false">取消</string>
    <string name="done" translatable="false">确定</string>
</resources>