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
