Android版添加phonegap--Camera插件教程

最新推荐文章于 2019-03-05 16:07:46 发布

weixin_33826609

最新推荐文章于 2019-03-05 16:07:46 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 javascript python ViewUI

原文链接：https://my.oschina.net/u/2505907/blog/593936

本文介绍如何利用Phonegap API获取和处理手机相机拍摄的照片，包括获取Base64编码数据、图片URI以及图片编辑功能，同时展示了如何从相册中获取图片。KeyMob平台提供一站式广告解决方案，帮助开发者轻松接入广告平台。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>

<html>

<head>

<title>Camera 插件</title>

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

<script type="text/javascript" charset="utf-8">

var pictureSource;//图片来源

var destinationType;//设置返回值的格式

//等待Phonegap连接设备
document.addEventListener("deviceready",onDeviceReady,false);

//Phonegap准备就绪，可以使用！
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}

//当成功获得一张照片的Base64编码数据后被调用
function onPhotoDataSuccess(imageData) {

//取消注释以查看Base64编码的图像数据
//console.log(imageData);

//获取图像句柄
var smallImage = document.getElementById('smallImage');

//取消隐藏的图像元素
smallImage.style.display = 'block';

//显示拍摄的照片
//使用内嵌CSS规则来缩放图片
smallImage.src = "data:image/jpeg;base64," + imageData;

}

//当成功得到一张照片的URI后被调用
function onPhotoURISuccess(imageURI) {

//取消注释以查看图片文件的URI
//console.log(imageURI);

//获取图片句柄
var largeImage = document.getElementById('largeImage');

//取消隐藏的图像元素
largeImage.style.display = 'block';

//显示拍摄的照片
//使用内嵌CSS规则来缩放图片
largeImage.src = imageURI;
}

//“Capture Photo”按钮点击事件触发函数
function capturePhoto(){

//使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50 });
}

//“Capture Editable Photo”按钮点击事件触发函数
function capturePhotoEdit() {

//使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像
navigator.camera.getPicture(onPhotoDataSuccess,onFail,{quality:20,allowEdit: true});
}

//“From Photo Library”/“From Photo Album”按钮点击事件触发函数

function getPhoto(source) {
//从设定的来源处获取图像文件URI
navigator.camera.getPicture(onPhotoURISuccess, onFail,{quality: 50,
destinationType: destinationType.FILE_URI,sourceType: source });
}

//当有错误发生时触发此函数
function onFail(mesage) {
alert('Failed because: ' + message);
}

</script>

</head>

<body>

<button onclick="capturePhoto();">Capture Photo</button> <br>

<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>

<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

<img style="display:none;" id="largeImage" src="" />

</body>

</html>

KeyMob致力于广告主和开发者都可以通过简单的操作轻松实现对多家广告平台的搭配使用。并能辅助开发者过市场审核，服务也很好。优点小而精，专做广告服务，对各个广告平台进行精选，集成方便快捷。