Cordova相机功能

最新推荐文章于 2024-03-31 11:32:20 发布

momo从事多年

最新推荐文章于 2024-03-31 11:32:20 发布

阅读量451

点赞数

分类专栏： Cordova

本文链接：https://blog.csdn.net/weixin_42057810/article/details/90719527

版权

Cordova 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

安装相机插件

在命令提示符窗口中运行以下代码以安装此插件。

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

cordova plugin add cordova-plugin-image-picker //选择多张照片

添加按钮和图像

在你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>

添加功能(拍照)

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);
          })
      },

}

运行打包后在模拟器上运行就可以啦