IONIC4 使用照相机以及从图库选择照片

1.照相机

---

1. 下载依赖

        ionic cordova plugin add cordova-plugin-camera

        npm install @ionic-native/camera

2. app.module.ts 导入

         import { Camera } from '@ionic-native/camera/ngx';

3. 使用

openGallery(): Promise> {
return new Promise((resolve, reject) => {
  let arr = new Array();
  const options: ImagePickerOptions = {
    quality: 100,
    maximumImagesCount: 3,
    outputType: 1
  }

  this.imagePicker.getPictures(options).then((results) => {
    for (var i = 0; i < results.length; i++) {
      arr.push('data:image/jpeg;base64,' + results[i]);
      console.log("黄 url " + results[i]);

    }
    resolve(arr);
  }, (err) => {
    resolve(new Array());
  });
})  }

注意： IOS 10 需要在 config.xml 里的 声明权限

You can take photos

官网地址：https://ionicframework.com/docs/native/camera/

2.图库

---

1.下载依赖

    ionic cordova plugin add cordova-plugin-telerik-imagepicker

    npm install @ionic-native/image-picker

2. app.module.ts 导入

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

3. 使用

openGallery(): Promise> {
return new Promise((resolve, reject) => {
  let arr = new Array();
  const options: ImagePickerOptions = {
    quality: 100,
    maximumImagesCount: 3,
    outputType: 1
  }
  this.imagePicker.getPictures(options).then((results) => {
    for (var i = 0; i < results.length; i++) {
      arr.push('data:image/jpeg;base64,' + results[i]);
      console.log(  results[i]);
    }
    resolve(arr);
  }, (err) => {
    resolve(new Array());
  });
}) }

官网地址：https://ionicframework.com/docs/native/image-picker/

3. 使用问题

使用图库插件选择图片的时候会发现界面为英文界面，需修改插件源码，目前只修改了android 源码，IOS的以后更新

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

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

multiimagechooser_strings_hu.xml 文件内容

  圖片選擇器
  還可以選擇 %d 張圖片
  打開圖庫出錯
  請求縮略圖，請耐心等候
  正在處理...
  請稍候...
  取消
  確認
  

\platforms\android\app\src\main\java\com\synconset 目录下
MultiImageChooserActivity.java 类 197行 修改

1565170190.png