cordova调用相机并预览照片

矫情吗；* 2022-05-14 05:39 405阅读 0赞

首先要有平台环境，我这里用的是安卓的环境，安装相机插件，在控制台运行

cordova plugin add cordova-plugin-camera

安装完成之后，在index.html插入如下代码：

<button id="imageCapture" style="width:200px;height:40px;background: orange;">take photo</button>
     <img src="" alt="" id="myImage" style="width:200px;height:200px;"/>

在js文件下的index.js里处理调用相机事件：

onDeviceReady函数里加入这个：

document.getElementById('imageCapture').addEventListener("click", imageCapture);

在js文件的最后写这个函数：

//捕捉图片
    function imageCapture() {
    	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);
    	}
    };

完成之后，在控制台执行 cordova build android --release

找到打包好的apk，发送到手机，手机上的运行效果如图：

![70][]![70 1][]

如此就可以调用原生的相机了。

[70]: https://img-blog.csdn.net/20180903180942792?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220514/dfeccfedf2fe456c86980f47e0acd55b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-photo-preview插件( 照片预览功能 )

Vue Photo Preview 它是基于photoswipe的vue图片预览插件，是一个用于在 Vue.js 项目中实现图片预览功能的插件。它提供了一个简单而强大的方式来展

朴灿烈づ我的快乐病毒、/ 2024年02月24日 06:23/ 0 赞/ 3 阅读

相关基于Android TextureView与SurfaceTexture实现相机Camera拍照预览与保存照片

基于Android TextureView与SurfaceTexture实现相机Camera拍照预览与保存照片写一个简单的例子，实现一个常见的开发功能：拍照功能。

向右看齐/ 2023年10月17日 15:48/ 0 赞/ 61 阅读

相关十分钟实现 Android Camera2 相机预览

1. 前言因为工作中要使用`Android Camera2 API`，但因为`Camera2`比较复杂，网上资料也比较乱，有一定入门门槛，所以花了几天时间系统研究了下，

╰+哭是因爲堅強的太久メ/ 2023年10月12日 20:36/ 0 赞/ 67 阅读

相关 android调用系统相机功能，并将照片保存到本地

在多媒体应用制作中，我们经常会用到camera，那么到底如何调用系统的camera呢： 1.调用相机： Intent intent = new Intent(MediaSt

小鱼儿/ 2022年09月24日 12:29/ 0 赞/ 275 阅读

相关上转图片并预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

淩亂°似流年/ 2022年06月07日 10:12/ 0 赞/ 283 阅读

相关 angularjs 上传照片电脑选取照片并且预览

html 中代码： <input type="file" file-Model="myFile" /> <div class="col-md-12">

淩亂°似流年/ 2022年05月19日 02:45/ 0 赞/ 210 阅读

相关 H5调用相机，裁剪，压缩照片

最近项目中遇到拍照，预览上传的问题，苹果手机不兼容，拍照旋转90度，在网上查找出好多方法，都无效，最后用input调用相机，然后用canvas画布裁剪照片，压缩保存，代码如下。

Love The Way You Lie/ 2022年05月16日 06:06/ 0 赞/ 184 阅读

相关 cordova调用相机并预览照片

首先要有平台环境，我这里用的是安卓的环境，安装相机插件，在控制台运行 cordova plugin add cordova-plugin-camera 安装完成之后

矫情吗；*/ 2022年05月14日 05:39/ 0 赞/ 406 阅读

相关 Android--相机预览及拍照临时文件/SurfaceView

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

比眉伴天荒/ 2022年04月16日 05:49/ 0 赞/ 351 阅读

相关 h5调用相机拍照，并显示照片

h5页面调用手机相机拍照，并将照片显示在手机或pc端； html代码块： <input type="file" capture="camcorder" accept="

不念不忘少年蓝@/ 2021年12月04日 09:21/ 0 赞/ 490 阅读