文档章节

Ionic系列——调用摄像头拍照和选择图库照片功能的实现

龙马行空
 龙马行空
发布于 2015/08/12 18:25
字数 815
阅读 15557
收藏 9

1、需求描述

    最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传。

2、准备

    ①、添加插件$cordovaCamera

cordova plugin add cordova-plugin-camera

    ②、在controller中添加依赖

3、代码实现

$scope.takePhoto=function(){
    var options = {
                                                                 //这些参数可能要配合着使用,比如选择了sourcetype是0,destinationtype要相应的设置
        quality: 100,                                            //相片质量0-100
        destinationType: Camera.DestinationType.FILE_URI,        //返回类型:DATA_URL= 0,返回作为 base64 編碼字串。 FILE_URI=1,返回影像档的 URI。NATIVE_URI=2,返回图像本机URI (例如,資產庫)
        sourceType: Camera.PictureSourceType.CAMERA,             //从哪里选择图片:PHOTOLIBRARY=0,相机拍照=1,SAVEDPHOTOALBUM=2。0和1其实都是本地图库
        allowEdit: false,                                        //在选择之前允许修改截图
        encodingType:Camera.EncodingType.JPEG,                   //保存的图片格式: JPEG = 0, PNG = 1
        targetWidth: 200,                                        //照片宽度
        targetHeight: 200,                                       //照片高度
        mediaType:0,                                             //可选媒体类型:圖片=0,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1,允许选择视频,最终返回 FILE_URI。ALLMEDIA= 2,允许所有媒体类型的选择。
        cameraDirection:0,                                       //枪后摄像头类型:Back= 0,Front-facing = 1
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true                                   //保存进手机相册
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        CommonJs.AlertPopup(imageData);
        var image = document.getElementById('myImage');
        image.src=imageData;
        //image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // error
        CommonJs.AlertPopup(err.message);
    });

};

4、几点说明

    ①如果要保存照片,需要设置destinationType是返回图像路径,然后设置saveToPhotoAlbum: true,这两个参数都设置才能保存照片,我发现如果设置了长和宽保存的照片质量会很差,去掉的画质量不错。但我android会默认存到

file://storage/sdcard0/Pictures中,我手机相册没识别出来。而且这个时候虽然设置allowEdit: true,但是返回来的是源文件的路径,这个剪裁功能等于没有用。

    ②如果要截取图片,要设置allowEdit: true,设置长和宽,并且destinationType返回的是base64位编码字符串。

    ③当设置sourceType: Camera.PictureSourceType.CAMERA时,这个时候的选择图库的界面很难看,需要设置sourceType为0或者2这个时候调用的就是系统的图库,好看点。所以我们实现拍照,然后在拍照的成功回调中调用打开相册选择图片,效果会好一点。

    ④长和宽的设置只影响剪裁框的大小,也就是如果返回base64会影响图片的大小,返回uri不会影响。

    ⑤设置成png比jpg的效果还差。

    ⑥当我设置Camera.DestinationType.NATIVE_URI,剪裁的时候返回以前照的同一张照片,但是放在image标签中的照片是最新的。后来我发现是这个问题导致的encodingType:Camera.EncodingType.PNG。

    ⑦这句话别人说是清理缓存用的,具体实现没用过,以后再研究吧

 $cordovaCamera.cleanup().then(...); // only for FILE_URI

    ⑧之后我会完善博客内容,当选择上传的时候弹出一个actionsheet,里面有选择图库,拍照等选项。上传的话可以直接把base64编码字符串直接传到后台处理,也可以用angular的上传,也可以用cordova-tranfer.

    ⑨调用前置摄像头一直不成功,只能手动切换。











© 著作权归作者所有

龙马行空
粉丝 391
博文 124
码字总数 119192
作品 0
房山
前端工程师
私信 提问
加载中

评论(8)

Four-leaf-clover
Four-leaf-clover

引用来自“龙马行空”的评论

引用来自“Tom-Lin”的评论

我发现,调用这个插件,从相册中选取图片时,指定图片类型不起作用。在 android 的时候,总是列出所有的文件类型,而在 iphone 上,总是只能列出图片类型。你有发现这个问题吗?

我还真没注意,回头我试一下
对呀,这个有解决办法嘛?只让它调用相册这个文件夹,而不是所有的文件类型。
起个昵称好难啊
起个昵称好难啊
为什么MIUI系统(红米note2 增强版)拍照后保存不成功?
龙马行空
龙马行空 博主

引用来自“tqdream”的评论

ionic现在能调用系统摄像头了么。不用写接口调用android原生的api吗?
一直就可以调用啊
tqdream
tqdream
ionic现在能调用系统摄像头了么。不用写接口调用android原生的api吗?
龙马行空
龙马行空 博主

引用来自“Tom-Lin”的评论

我发现,调用这个插件,从相册中选取图片时,指定图片类型不起作用。在 android 的时候,总是列出所有的文件类型,而在 iphone 上,总是只能列出图片类型。你有发现这个问题吗?

我还真没注意,回头我试一下
Tom-Lin
Tom-Lin
我发现,调用这个插件,从相册中选取图片时,指定图片类型不起作用。在 android 的时候,总是列出所有的文件类型,而在 iphone 上,总是只能列出图片类型。你有发现这个问题吗?
龙马行空
龙马行空 博主

引用来自“邪气小生”的评论

这种调用拍出来的照片效果极差
我的实际效果是还行,我觉得这个得看手机的摄像头的像素吧
邪气小生
邪气小生
这种调用拍出来的照片效果极差
项目需求讨论 - WebView下拍照及图片选择功能

前言: 如果觉得掘金上看图片放大看不清楚,可以跳到另外的同步发布的链接看,放大图片下部有个可以查看原图功能,很清楚:项目需求讨论 - WebView下拍照及图片选择功能 现在很多app里面,都...

青蛙要fly
2018/06/23
0
0
iOS-拍照后裁剪,不可拖动照片的问题

问题 在项目中,选择照片或拍照的功能很长见,由于我之前采用系统自带的UIimagePickViewController遇到一点问题: 使用拍照功能,进行截取时时,拍照完成的图片无法拖动,没有办法进行选择性的截取...

jins_1990
2016/07/08
0
0
年度领航全面屏手机 | vivo X20 系列:首款击穿线上线下渠道的全面屏手机

摘要 vivo X20 系列凭借着极高的综合完成度和极强的产品力成为了第一款击穿线上线下渠道的全面屏手机,也是带动全面屏浪潮的主力产品。 「年度产品评选」是极客之选每年年底的保留节目。小到...

极客之选的小伙伴们
2018/01/02
0
0
Android应用开发之使用PhoneGap实现拍照上传功能

看这里:Android应用开发之使用PhoneGap实现拍照上传功能 在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习...

Realfighter
2015/02/05
10.6K
3
xiao66guo/XGCustomCamera

XGCustomCamera 用完全自定义的方式来实现相机的拍照功能,并实现了在拍照前的签名、修改签名文字的大小、修改签名文字的颜色、前后摄像头的切换以及对拍完的照片进行分享等功能 项目功能介绍...

xiao66guo
2016/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
8分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
8分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
33分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
36分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部