ionic3.7照相和多图片选择

做了ionic项目也有一段时间了,把之前做的笔记分享出来,仅供大家参考,一起学习、一起进步,我感觉学一门语言,就是去找实际的案列直接应用它,在实践中学习,今天介绍的是通过ionic UI组件ImagePicker、Camera进行照片和照相功能

1)首先你要想用这个组件必须要添加它,通过命令行npm install --save @ionic-native/camera 安装camera;

通过命令行npm install --save @ionic-native/image-picker 安装image-picker,但是注意除了这个命令还要安装插件cordova plugin add https:/github.com/Telerik-Verified-Plugins/ImagePicker.git,这个命令需要git,所以要按照git,这里就不多说了。

2)安装完命令就可以撸代码了,通过ActionSheetController 弹出选择框 选择照片和相机,代码如下:

let actionSheet = this.actionSheetCtrl.create({
        title: '',
        buttons: [
          {
            text: '拍照',
            handler: () => {
              this.getPhoto();
              console.log('拍照 clicked');
            }
          }, {
            text: '相册',
            handler: () => {
              this.getImage();
              console.log('相册 clicked');
            }
          }, {
            text: '取消',
            role: 'cancel',
            handler: () => {
              console.log('取消 clicked');
            }
          }
        ]
      });
    actionSheet.present();

3)多文件选择:代码如下:

let n = $('.uploadimg_list').children().length;
    const optionss= { maximumImagesCount:4-n};
this.imagePicker.getPictures(optionss).then((results) => {
      this.imageArr.splice(0, this.imageArr.length);
      let  results
 for (let i = 0; i < results.length; i++) {
        this.imageArr.push(results[i]);
        let img_list = $('.uploadimg_list');

          for (let i = 0; i < this.imageArr.length; i++) {
           resultess = '
![](' + this.imageArr[i] + ')
'; } img_list.append(resultess); sessionStorage.setItem('imgtxt_imgs', JSON.stringify(this.imageArr)); } }, (err) => { alert( '未选择'); });

4)照相机:代码如下

 const options: CameraOptions = {
      quality: 50,
      destinationType: this.cameras.DestinationType.DATA_URL,
      encodingType: this.cameras.EncodingType.JPEG,
      mediaType: this.cameras.MediaType.PICTURE
    }
    this.cameras.getPicture(options).then((imageData) => {
      //this.imageArr.splice(0, this.imageArr.length);
      let  resultess;
      this.imageArr.push(imageData);
      let img_list = $('.uploadimg_list');
      resultess = '
![](' + imageData + ')
'; img_list.append(resultess); sessionStorage.setItem('imgtxt_imgs', JSON.stringify(this.imageArr)); }, (err) => { // Handle error alert( '未选择'); });

你可能感兴趣的:(ionic3.7照相和多图片选择)