ionic2 --拍照
1、安装ionic native插件
git地址： https://github.com/apache/cordova-plugin-camera
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
2、在app.module.ts中声明插件
import { Camera } from '@ionic-native/camera';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
3、使用
HTML：
<
button
ion-button
(
click
)=
'addPicture()'
>选择图片
button
>
TypeScript：
import
{
Camera
}
from
'@ionic-native/camera'
;
import
{
ActionSheetController
}
from
'ionic-angular'
;
@
Component
({
selector:
'page-mine'
,
templateUrl:
'mine.html'
})
export
class
MinePage
{
images
:
Array
<{
src
:
string
}>;
constructor
(
private
camera
:
Camera
,
public
actionSheetCtrl
:
ActionSheetController
,
) {
}
openCamera
()：void {
var
srcType
=
this
.
camera
.
PictureSourceType
.
CAMERA
;
var
options
=
this
.
setOptions
(
srcType
);
this
.
getOptions
(
options
);
};
openPic
(){
var
srcType
=
this
.
camera
.
PictureSourceType
.
PHOTOLIBRARY
;
var
options
=
this
.
setOptions
(
srcType
);
this
.
getOptions
(
options
);
}
setOptions
(
srcType
){
const
options
:
CameraOptions
=
{
quality:
100
,
destinationType:
this
.
camera
.
DestinationType
.
DATA_URL
,
encodingType:
this
.
camera
.
EncodingType
.
JPEG
,
allowEdit:
true
,
saveToPhotoAlbum:
false
,
sourceType:srcType
,
mediaType:
this
.
camera
.
MediaType
.
PICTURE
};
return
options
;
}
getOptions
(
options
){
this
.
camera
.
getPicture
(
options
).
then
((
imageData
)
=>
{
// imageData is either a base64 encoded string or a file URI
// If it's base64:
let
base64Image
=
'data:image/jpeg;base64,'
+
imageData
;
this
.
images
.
unshift
({
src:base64Image
})
}, (
err
)
=>
{
// Handle error
});
}
addPicture
()
{
let
actionSheet
=
this
.
actionSheetCtrl
.
create
({
title:
'选择图片'
,
buttons:
[
{
text:
'拍照'
,
role:
'camera'
,
handler:
()
=>
{
this
.
openCamera
();
}
},{
text:
'相册'
,
handler:
()
=>
{
this
.
openPic
();
}
},{
text:
'Cancel'
,
role:
'cancel'
,
handler:
()
=>
{
console
.
log
(
'Cancel clicked'
);
}
}
]
});
actionSheet
.
present
();
}
}
官方文档：https://ionicframework.com/docs/native/camera/