关闭

cordova camera插件——摄像头插件的使用及上传图片

标签: cordovapluginwebappcamera
6733人阅读 评论(1) 收藏 举报
分类:


介绍

cordova提供照相机API与设备相机进行交互。

通过照相机API、我们可以拍摄或者访问照片库中的照片,返回图片的base64编码字符串或者图片的url文件路径。

 

 

 

安装插件

需要cordova 5.0以上版本

cordova plugin add cordova-plugin-camera

通过ID安装旧版本的cordova

cordova plugin add org.apache.cordova.camera

当然,也可以通过下载直接添加:(不稳定)

cordova plugin add https://github.com/apache/cordova-plugin-camera.git




 

使用方法:

这个插件定义了一个全局的navigator.camera 对象,它提供了一个API,用于拍照和从系统图库中选择图像。

虽然对象是附加到全局的navigator对象内,但是需要deviceready事件之后才可用

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.camera);
}




API 参考



navigator.camera.getPicture

使用camera.getPicture,可以调用设备默认的摄像头拍照,或从设备相册中获取一张照片照片将以base64编码的字符串或图片URI形式返回

 

navigator.camera.getPicture的参数:



示例:

拍一张照片,并返回它的一个 base64 编码的图像:

    navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });
    
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }

拍一张照片和返回图像文件的位置:

navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.FILE_URI 
    });
    
    function onSuccess(imageURI) {
        var image = document.getElementById('myImage');
        image.src = imageURI;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }



namera.cleanup()

移除掉中间图像文件是调用camera.getPicture所保存在临时的存储空间。

只适用于当Camera.sourceType的值=Camera.PictureSourceType.CAMERACamera.destinationType =Camera.DestinationType.FILE_URI

 

Supported Platforms 支持平台

· iOS


示例:

navigator.camera.cleanup(onSuccess, onFail);
function onSuccess() {
    console.log("Camera cleanup success.")
}
function onFail(message) {
    alert('Failed because: ' + message);
}




CameraError

onError 的回调函数提供了一条错误信息。

    function(message) {
        // Show a helpful message
    }

参数

message    消息提供的设备的本机代码





CameraSuccess

成功访问图片后的回调函数,该函数的参数取值取决于destinationType的类型,如果destinationTypeDATA_URI,则该参数返回Base64编码的图片数据;如果destinationTypeFIEL_URI,则该参数返回的是图片的URI

不论是图像数据或者URI,都可以通过img标签的src属性显示在网页中,

如对于图片数据imageData,通过给src属性赋值”data:image/jpeg:base64,”+imageData即可,

而对于图片URI imageURI,通过给src属性直接赋值imageURI即可。

    function(imageData) {
        // Do something with the image
    }


参数

 imageData   Base64 编码进行编码的图像资料,或图片文件的 URI,取决于 `cameraOptions` 效果。


示例:返回的base64设置到img标签中

    function cameraCallback(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }



CameraOptions

相机设置的可选参数。

名字

类型

默认值

描述

quality

number 50 图像的保存质量,范围0-100,100是最大值,最高的分辨率,没有任何压缩损失(请注意有关该相机的分辨率信息不可用。)
destinationType DestinationType FILE_URI 选择返回值的格式
sourceType PictureSourceType         CAMERA 获取图片的来
allowEdit Boolean true 允许在选择图片之前进行简单的编辑
encodingType EncodingType JPEG 选择图像的返回编码
targetWidth number   宽度像素用来缩放图像。必须和targetHeight一起使用。宽高比保持不变。
targetHeight number   高度像素用来缩放图像。必须和targetWidth一起使用。宽高比保持不变
mediaType MediaType PICTURE                        选择media类型。它只适用PictureSourceType是PHOTOLIBRARY或SAVEDPHOTOALBUM
correctOrientation                    Boolean   如果是横向拍摄的照片,会自动旋转到正确的方向
saveToPhotoAlbum                                    Boolean   设备拍照后的图像是否保存的图片库中
popoverOptions CameraPopoverOptions                                            仅ios可用,设定在ipad的popover的位置
cameraDirection Direction BACK 选择前置摄像头还是后置摄像头




























Camera.DestinationType :枚举
类型:相机的静态枚举属性
特性:
变量名 类型 默认值 描述
DATA_URL number 0 返回Base64编码的字符串
FILE_URI number 1 返回文件的URI(content://media/external/images/media/2 for Android)
NATIVE_URI number 2 返回原生URI (eg. asset-library://... for iOS)


Camera.EncodingType :枚举
类型:相机的静态枚举属性
特性:
变量名 类型 默认值 描述
JPEG number 0 返回JPEG的图片
PNG number 1 返回PNG的图片


Camera.MediaType :枚举
类型:相机的静态枚举属性
特性:
变量名 类型 默认值 描述
PICTURE number 0 仅允许选择静态影像。 默认。将通过DestinationType返回指定格式
VIDEO number 1 仅允许选择视频,只返回网址
ALLMEDIA number 2 允许返回所有媒体格式


Camera.PictureSourceType :枚举
类型:相机的静态枚举属性
特性:
变量名 类型 默认值 描述
PHOTOLIBRARY number 0 从设备相册选择图片
CAMERA number 1 用摄像头拍摄图片
SAVEDPHOTOALBUM number 2 从设备相册选择图片(一个应该是ios一个安卓)


Camera.PopoverArrowDirection :枚举
匹配的iOS UIPopoverArrowDirection在popover固定的箭头位置。
类型:相机的静态枚举属性
特性:
变量名 类型 默认值
ARROW_UP number 1
ARROW_DOWN number 2
ARROW_LEFT number 4
ARROW_RIGHT number 8
ARROW_ANY number 15


Camera.Direction :enum
类型:相机的静态枚举属性
特性:
变量名 类型 默认值 描述
BACK number 0 使用后置摄像头
FRONT number 1 使用前置摄像头


CameraPopoverOptions
iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数。需要注意的是popover的尺寸可以改变,以适应屏幕的箭头和取向方向。确保指定元素位置时考虑方向变化。
变量名 类型 默认值 描述
[x] number 0 屏幕选取框的x坐标
[y] number 32 屏幕选取框的y坐标
[width] number 320 屏幕选取框的宽度
[height] number 480 屏幕选取框的高度
[arrowDir] PopoverArrowDirection ARROW_ANY 确定popover的指向






示例

示例一:使用camera插件,从图片库中选择图片,返回base64编码字符串

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按钮</button></div>
    <div class="line"><img id="myImage" style="height: 200px;"></img></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

 

 

index.js

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var _this = this;
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 打开图片库
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                       // 相片质量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM, // 设置从图片库获取
                destinationType: Camera.DestinationType.DATA_URL       // 以base64返回
            });
            function onSuccess(imageData) {
                console.log(imageData)
                _this.$$('myImage').src = "data:image/jpeg;base64," + imageData;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();


运行:

点击按钮,显示相册,选择图片

图片被添加到页面上



注意:

返回base64编码字符串是没有data:image/jpeg;base64,头部的!!!







示例二:

使用camera插件,打开摄像头拍照,返回照片的文件路径,并显示在页面上

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
        #myImage {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按钮</button></div>
    <div class="line"><img id="myImage"></img></div>
    <div class="line"><span id="text"></span></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

 

 

index.js

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 打开图片库
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片质量是50
            sourceType: Camera.PictureSourceType.Camera,            // 设置从摄像头拍照获取
            destinationType: Camera.DestinationType.FILE_URI        // 以文件路径返回
         });

         function onSuccess(imageURI) {
             console.log(imageURI)
             _this.$$('myImage').src = imageURI;
             _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   }
};

app.initialize();

 

运行:

点击按钮,打开照相机

拍照后会显示一个扣扣,点击扣扣确认拍下的照片


显示图片到页面上


 

备注:

camera插件获取了拍照的图片的文件路径并返回



 

 

续上:

通过返回的图片文件路径,获取到图片的base64编码字符串

使用这个函数就可以把图片转成base64

   // 把图片转成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }

 

index.js

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 打开图片库
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片质量是50
            sourceType: Camera.PictureSourceType.Camera,            // 设置摄像头拍照获取
            destinationType: Camera.DestinationType.FILE_URI        // 以文件路径返回
         });

         function onSuccess(imageURI) {
            console.log(imageURI)
            _this.$$('myImage').src = imageURI;
                _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);

            // 转base64
            _this.convertImgToBase64(imageURI, function(base64Img) {
               console.log(base64Img)
            });
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   },
   // 把图片转成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }
};

app.initialize();

 

注意:

拿到的base64编码字符串是有data:image/png;base64,头部的!!!



 

 

小结:

提供以上2种方法,获取base64编码字符串。

区别:

1种方法获取的base64编码字符串没有data:image/png;base64,头部

2种方法获取的base64编码字符串有data:image/png;base64,头部

2种方法还拿到了文件名。

 

 

 

 

 

示例三:

从图库中获取图片,返回图片在系统中的路径

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <button id="openLabrary">按钮</button>
            <img id="myImage" style="height: 200px;"></img>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

 

 

index.js

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 打开图片库
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,					// 相片质量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,	// 设置从图片库获取
                destinationType: Camera.DestinationType.FILE_URI	// 以文件路径返回
            });
            function onSuccess(imageURI) {
                 console.log(imageURI)
		_this.$$('myImage').src = imageURI;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();

 

运行:

点击按钮,打开图片库,选择图片,显示


 

 

 

续上:结合使用FileTransfer插件上传图片

 index.js 

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        var _this = this;
        getDomLabrary.onclick = function(){
            // 打开图片库
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                            // 相片质量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,  // 设置从图片库获取
                destinationType: Camera.DestinationType.FILE_URI        // 以文件路径返回
            });
            function onSuccess(imageURI) {
                console.log(imageURI)
                _this.$$('myImage').src = imageURI;

                // 上传
                _this.upLoadImg(imageURI);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    },
    // file-Transfer插件,上传图片文件
    upLoadImg(imageURI){
        var options = new FileUploadOptions();
        options.chunkedMode = false;
        options.fileKey = "file";
        options.fileName = imageURI.substring(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";
        options.httpMethod = "POST";
        console.log("options=======");
        console.log(options);

        var fileTransfer = new FileTransfer();
        var successCallback = function(r){
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }
        var errorCallback = function (error) {
            console.log("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }
        fileTransfer.upload(
                    imageURI,   //本地文件路径
                    encodeURI("http:\/\/10.1.10.53:8089/oss/UploadServlet"),  //服务器上传的路径
                    successCallback,  //成功的回调
                    errorCallback,    //失败的回调
                    options);         //配置项
    }
};

app.initialize();


运行:

点击按钮,打开图片库,选择图片,显示

上传成功

 

备注:

这个上传的服务器路径:

var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"

使用了一个.jsp文件写成的



需要查看fileTransfer插件的使用方法,可以点击下面链接

http://blog.csdn.net/michael_ouyang/article/details/75305119

0
0
查看评论

iOS:<Photos/Photos.h>获取相册视频以及图片

转自:http://www.jianshu.com/p/ea0274a33209 因为项目的需求,要捕获相册中的视频与图片,之前也对之尚未做过什么探讨,仅知道iOS8.0后,苹果推出了新的相册管理的包,那么正好,现在可以看看这个框架了,也知道AlAssetLibrary,使用的话倒...
  • zhanglizhi111
  • zhanglizhi111
  • 2017-02-28 14:16
  • 2243

Vue.js 使用cordova camera插件调取相机

介绍完上文 用Cordova打包Vue项目之后,本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作。 具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 cordova plugin add cordova...
  • Iohboel
  • Iohboel
  • 2017-08-23 08:59
  • 3960

Vue2.0实现调用摄像头进行拍照功能以及图片上传功能引用exif.js(2)

可以在github 上下载demo链接  https://github.com/fongdaBoy/Vue2.0ComponentDemo vue组件代码 template> div> div style="padding:20px;...
  • iceking66
  • iceking66
  • 2017-10-01 10:43
  • 2157

html5在手机端调用摄像头的介绍以及新特性

camera" accept="image/*" multiple>,这句html大家应该都知道是用来在手机端或者pc端上传多张图片的情况下使用的,现在我们着重来分析下 每个属性,以及新出的新特性的特点,后面会附上不同属性的demo测试。 在 上面的HTM...
  • playboyanta123
  • playboyanta123
  • 2017-05-19 11:20
  • 2801

vue项目中实现扫码功能

最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hBuilder打的包,刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。       以下是代码实现: template> d...
  • qq_35844177
  • qq_35844177
  • 2018-01-02 14:49
  • 549

vue入门实战教程 - 用vue高仿饿了吗APP

滴滴出行的一位哥们录制的视频,收费的,价格198元,我这里不是打广告,我不认识他。不过对于vue的入门还是不错的,使用的是vue1.0框架,虽然现在已经是vue2.0, 不过2.0基本上只是多了virtual-DOM,Templates || JSX || Hyperscript,流式服务端渲染及一...
  • NotBad_
  • NotBad_
  • 2017-01-08 23:31
  • 5611

Android4.4中获取资源路径问题

DocumentsProvider 学习
  • huangyanan1989
  • huangyanan1989
  • 2013-12-11 14:57
  • 13493

ionic 图片拍照;选择上传 ngcordova cordovaFileTransfer cordovaCamera

http://ngcordova.com/docs/plugins/touchID/ 这里面可都是硬货; 添加ngcordova插件;http://ngcordova.com/docs/install/(初始化网址); 至于不理解这句的bower install ngCordov...
  • u012922981
  • u012922981
  • 2016-03-18 16:15
  • 9652

$cordovaFileTransfer 拍照上传文件

ionic开发项目,其中涉及到拍照上传文件, 按照官方的说法 第一步:配置 var options ={ quality:50,//相片质量0-100 destinationType:Camera.DestinationType.DATA_URL,// 返回类型:DATA_URL= 0,返...
  • sixteen_cicle
  • sixteen_cicle
  • 2017-05-25 17:31
  • 976

cordova混合式开发:实现头像裁切、本地缩放、上传,适用于android和ios

安装插件 命令行进入项目 cordova plugin add cordova-plugin-camera cordova-plugin-file cordova-plugin-file-opener2 cordova-plugin-file-transfer co...
  • sheng119
  • sheng119
  • 2017-06-23 11:44
  • 1053
    个人资料
    • 访问:472355次
    • 积分:4612
    • 等级:
    • 排名:第7601名
    • 原创:98篇
    • 转载:3篇
    • 译文:2篇
    • 评论:91条
    博客专栏