IONIC4 使用照相機以及從圖庫選擇照片

1.照相機


1. 下載依賴

        ionic cordova plugin add cordova-plugin-camera

        npm install @ionic-native/camera

2. app.module.ts 導(dǎo)入

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

3. 使用

openGallery(): Promise<Array<string>> {
return new Promise((resolve, reject) => {
  let arr = new Array<string>();
  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 里的 <platform name='ios'> 聲明權(quán)限

<config-fileparent="NSCameraUsageDescription"platform="ios"target="*-Info.plist"><string>You can take photos</string></config-file>

官網(wǎng)地址: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 導(dǎo)入

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

3. 使用

openGallery(): Promise<Array<string>> {
return new Promise((resolve, reject) => {
  let arr = new Array<string>();
  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());
  });
}) }

官網(wǎng)地址:https://ionicframework.com/docs/native/image-picker/

3. 使用問題

使用圖庫插件選擇圖片的時候會發(fā)現(xiàn)界面為英文界面,需修改插件源碼,目前只修改了android 源碼,IOS的以后更新

項目 platforms\android\app\src\main\res  目錄下

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

multiimagechooser_strings_hu.xml 文件內(nèi)容

<?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">確認(rèn)</string>
</resources>  

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


1565170190.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容