Cordova相機功能

1. 安裝相機插件

在命令提示符窗口中運行以下代碼以安裝此插件。

D:\hello>cordova plugin add cordova-plugin-camera

cordova plugin add cordova-plugin-image-picker  //選擇多張照片

1. 添加按鈕和圖像

在你vue文件的<template></template>寫入以下代碼：

<ion-button @click="cameraGetPicture('Camera')">相機</ion-button>
<div class="camera myImage">
</div>
<ion-button @click="cameraGetPicture('PHOTOLIBRARY')">相冊</ion-button>
<div class="photo myImage">
</div>
<ion-button @click="morePicture">多張照片</ion-button>
<div class="photos myImage">
</div>

1. 添加功能(拍照)

 export default {

   data() {

      return {

        sourceType: {

          "PHOTOLIBRARY": Camera.PictureSourceType.PHOTOLIBRARY,//相冊

          "Camera": Camera.PictureSourceType.Camera//相機

        }

      }

    },

   methods: {
      cameraGetPicture(type) { //調用相機或圖庫
        navigator.camera.getPicture(onSuccess, onFail, {
          quality: 50,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: this.sourceType[type],
          targetWdith : 100,
          targetHeight : 100,
        });

        function onSuccess(imageURL) {
          let oDiv = '';
          if(type==='Camera'){
             oDiv = $('.camera');
          }else{
            oDiv = $('.photo');
          }
         let image =$('<img style="width: 100px;height: 100px;" src="'+ "data:image/jpeg;base64," + imageURL+'">');

          oDiv.append(image);
        }

        function onFail(message) {
          alert('失敗原因: ' + message);
        }

      },
      morePicture(){//選擇多張圖片
        window.imagePicker.getPictures(
          function(options) {
              let oDiv = $('.photos');

            for (let i = 0; i < options.length; i++) {

              let image = $('<img style="width: 100px;height: 100px;" src="' + options[i]+'">')

              oDiv.append(image);

            }

         }, function (error) {
            alert('Error: ' + error);
          })
      },

}

}

運行打包後在模擬器上運行就可以啦