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

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,这两个参数都设置才能保存照片,但是保存的照片质量很差。而且这个时候虽然设置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.

时间: 2024-08-01 10:44:24

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

android: 调用摄像头拍照

很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄像头进行拍照. 新建一个 ChoosePicTest 项目,然后修改 activity_main.xml 中的代码,如下所示: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro

【MediaKit】WPF项目中 调用摄像头拍照的开发包

今天遇到一个 人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPFMediaKit.dll 文件到项目中 第二步:把WPFMediaKit.dll文件引用进来. 步骤 右击引用->添加引用->浏览选项卡->选择WPFMediaKit.dll文件所在的位置. 第三步:在窗口顶端加入如下代码(注意不要该意记)就像using一个类样. xmlns:WPFMedi

h5 实现调用系统拍照或者选择照片并预览

这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件.除非你收藏了什么好东西,或者是你收藏了什么比较旧的.需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗? 好了,咱入正题! 这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来

android调用摄像头拍照

调用手机摄像头拍照,获取拍照后的图片数据.以下代码是在activity中:     // 调用摄像头         Button b = (Button) findViewById(R.id.btn1);     b.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View v) {             // Here we fire the inte

使用html5绘图技术事项调用摄像头拍照;

在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5: 以下是HTML代码 <video id="video" width="640" height="480" autoplay></video> <!--这一行是调用摄像头之后呈现的画面--> <button id="snap">Snap Photo</button> <!--拍照按钮-->

C#调用摄像头拍照

在winforn程序中,经常会遇到一些调用硬件的功能,这里给大家讲解的事使用AForge调用摄像头 首先引用用dll文件 这些都是需要应用的dll文件,其中AForge.Controls.dll文件里面封装了一些void控件,在工具箱中应用文件就会出现如下控件 这里会使用到VideoSourcePlayer控件,下面是底层代码 using引用 using System.Drawing.Imaging;using System.Windows;using System.IO;using Syste

html5中调用摄像头拍照

方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象.调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像界面指示位置 回调方法: CameraSuccessCallback: 调用摄像头操作成功回调 CameraErrorCallback: 摄像头操作失败回调 权限: 功能模块(permissions) { // ... "permissions":{ // ... "Camera

谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE

<template> <div> <!--canvas截取流--> <canvas ref="canvas" width="320" height="260"></canvas> <!--图片展示--> <video ref="video" width="340" height="280" autoplay&g

H5调用摄像头拍照

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>摄像头拍照</title> <meta name="viewport" content="widt