cordova相机插件

最新推荐文章于 2024-05-21 18:32:18 发布

otatoz

最新推荐文章于 2024-05-21 18:32:18 发布

阅读量679

点赞数 1

分类专栏： cordova 文章标签： cordova cordova相机本地图库获取

本文链接：https://blog.csdn.net/qq_42720683/article/details/88740078

版权

cordova 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

插件安装

C:\Users\xpf\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

插件使用

获取手机拍照功能

通过代码看实际效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相机</title>
</head>
<style>
    #MyImg{
	height: 150px;
	width:150px;
    }
</style>
<body>
    <button id="Btn">拍照</button>
    <!-- 拍照后图片显示的地方 -->
    <img id="MyImg">
</body>
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
    document.addEventListener('deviceready',onDeviceReady,false);
    function onDeviceReady(){
    	// 获取拍照按钮
	var MyBtn = document.getElementById('Btn');
	// 给拍照按钮添加监听事件
	MyBtn.addEventListener('click',function(){
	       navigator.camera.getPicture(onSuccess, onFail, { 
	           quality: 50,
	           destinationType: Camera.DestinationType.DATA_URL
	       });

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

	       function onFail(message) {
		   alert('Failed because: ' + message);
	       }
	});
    }
</script>

效果图：

获取本地相册

通过代码实现功能：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>本地相册</title>
</head>
<style>
	#MyImg{
		height: 150px;
		width:150px;
	}
</style>
<body>
	<button id="Btn">获取相册</button>
	<!-- 拍照后图片显示的地方 -->
	<img id="MyImg">
</body>
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
	document.addEventListener('deviceready',onDeviceReady,false);
	function onDeviceReady(){
		// 获取拍照按钮
		var MyBtn = document.getElementById('Btn');
		// 给拍照按钮添加监听事件
		MyBtn.addEventListener('click',function(){
			navigator.camera.getPicture(onSuccess, onFail, { 
		       quality: 50,
		       destinationType: Camera.DestinationType.FILE_URL,
		       sourceType: Camera.PictureSourceType.PHOTOLIBRARY
		    });

		    function onSuccess(imageURL) {
		       var image = document.getElementById('MyImg');
		       image.src = imageURL;
		    }

		    function onFail(message) {
		       alert('Failed because: ' + message);
		    }
		});
	}
</script>

效果图：

注意：这边如果直接复制粘贴w3c上的代码，可能会无法显示图片，所以我改了一个参数

W3C代码：

我的代码：

DATA_URL指的是 返回base64编码字符串；

FILE_URL指的是 返回图片文件URI

这里附上完整的参数及其含义，有兴趣的可以自己全都尝试一下：

参数	含义
quality	图像质量在0~100内，默认值为50
destinationType	DATA_URL 返回base64编码字符串 FILE_URL 返回图片文件URL NATIVE_URL 返回图片本机URL
sourceType	PHOTOLIBRARY 打开照片库 CAMERA 打开本机相机 SAVEDPHOTOALBUM 打开已保存的相册
allowEdit	允许图像编辑
encodingType	JPEG 返回JPEG格式的图像 PNG 返回PNG格式的图像
targetWidth	图片缩放宽度
targetHeight	图片缩放高度
cameraDirection	FRONT 前置摄像头返回后置摄像头

-----------------本文完-----------------

otatoz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cordova相机插件

插件安装C:\Users\xpf\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera插件使用获取手机拍照功能通过代码看实际效果：<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫