Phonegap - 从图库中选择图像
Posted
技术标签:
【中文标题】Phonegap - 从图库中选择图像【英文标题】：Phonegap - Choose Image From Gallery 【发布时间】：2011-07-14 08:41:34 【问题描述】：谁能告诉我，或指出如何从 Phonegap / android 中的手机图片库中获取图片的方向？有关于访问相机（效果很好）但不选择现有图像的文档。
我正在寻找 Phonegap / javascript 而不是 Java。
提前致谢！
【问题讨论】：
【参考方案1】：呃，Camera 文档涵盖了这一点。这不适合你吗？详情请查看Camera.PictureSourceType。文档站点给出了这个派生图像的示例：
function getPhoto(source)
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source );
sourceType 是这里的关键。它可以是Camera.PictureSourceType.CAMERA（默认），或者对您更有用的它可以是Camera.PictureSourceType.PHOTOLIBRARY 或Camera.PictureSourceType.SAVEDPHOTOALBUM。
Camera Documentation
【讨论】：
很好的答案，但我认为 phonegap 文档可以处理一些图片。它低估了自己。它还可以帮助像我这样的鱼的注意力广度:)感谢上帝的读者:) 有什么区别：PHOTOLIBRARY vs SAVEDPHOTOALBUM @Mirko 它在锡上写的内容：设备上的通用图像库或特定专辑。 （但请注意，在某些版本的 Android 上，这两个选项有一些怪癖）。 @Ben 刚刚找到文档：Camera.PictureSourceType.PHOTOLIBRARY and Camera.PictureSourceType.SAVEDPHOTOALBUM both display the same photo album. 所以没有区别。 github.com/apache/cordova-plugin-camera
@Mirko 您指的是当前插件。这篇文章可以追溯到六年前，涉及一个更古老的实例。那时，两者在某些 Android 版本上是可以互换的，是的（不是在 ios 上）。【参考方案2】：
您还可以使用以下库：https://github.com/wymsee/cordova-imagePicker 我更喜欢这个，因为它更小，易于实现，并且不需要摄像头权限。
【讨论】：
【参考方案3】：看看这个post，它可能对你有帮助。
有时，您在上传现有图片时可能会遇到一些问题。根据this answer，解决方案很简单。简而言之，您需要将原生 Android URI 转换为 API 可以使用的：
// URL you are trying to upload from inside gallery
window.resolveLocalFileSystemURI(img.URI, function(entry)
console.log(entry.fullPath);
, function(evt)
console.log(evt.code);
);
【讨论】：
【参考方案4】：document.addEventListener("deviceready",function()
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem)
var sdcard = fileSystem.root;
sdcard.getDirectory('dcim/camera',create:false, function(dcim)
var directoryReader = dcim.createReader();
directoryReader.readEntries(function(entries)
for (var i=0; i<entries.length; i++)
entries[i].file(function(f)
var reader = new FileReader();
reader.onloadend = function (evt)
var url= evt.target.result;//base64 data uri
console.log(url)
reader.abort();
;
reader.readAsDataURL(f);
,function(error)
console("Unable to retrieve file properties: " + error.code);
);
,function(e)
console.log(e.code);
);
, function(error)
console.log(error.code);
);
, function(evt) // error get file system
console.log(evt.target.error.code);
);
, true);
【讨论】：
【参考方案5】：我正在开发cordova-plugin-photo-library 插件，它提供了跨平台的方式来枚举设备上的所有照片。
用法：
cordova.plugins.photoLibrary.getLibrary(function (library)
// Here we have the library as array
cordova.plugins.photoLibrary.getThumbnailUrl(library[0],
function (thumbnailUrl) image.src = thumbnailUrl; ,
function (err) console.log('Error occured'); ,
thumbnailWidth: 512,
thumbnailHeight: 384,
quality: 0.8
);
);【讨论】：
你好@viskin。很抱歉劫持，但我今天找到了你的插件，但在我的手机上jsfiddle.net/kartagis/pjdqp3ku 的代码需要大约 15 秒。我应该使用 localStorage 还是其他东西来加快这个过程？ 请在项目的github页面上打开一个issue【参考方案6】：简单
首先 在 CMD 中将相机插件添加到项目中。
F:\phonegap>myapp>cordova plugin add cordova-plugin-camera
然后试试这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
<title>PhoneGap app</title>
<!-- Script -->
<script type="text/javascript" src="cordova.js" ></script>
<script type='text/javascript' src='jquery-3.0.0.js' ></script>
<script type='text/javascript'>
$(document).ready(function()
// Take photo from camera
$('#but_take').click(function()
navigator.camera.getPicture(onSuccess, onFail, quality: 20,
destinationType: Camera.DestinationType.FILE_URL
);
);
// Select from gallery
$("#but_select").click(function()
navigator.camera.getPicture(onSuccess, onFail, quality: 50,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
destinationType: Camera.DestinationType.FILE_URI
);
);
// Change image source
function onSuccess(imageData)
var image = document.getElementById('img');
image.src = imageData + '?' + Math.random();;
function onFail(message)
alert('Failed because: ' + message);
);
</script>
</head>
<body>
<div style="margin:0 auto; width:30%!important;text-align: center;">
<img src="img/cam2.jpg" id='img' style="width: 100px; height: 100px;">
</div><br/>
<div style="width:100%; text-align:center; padding:10px;">
<button id='but_take'>Take photo</button>
<button id='but_select'>Select photo from Gallery</button>
</div>
</body>
</html>
我 100% 确定它有效。
参考在这里 Choose an image from Camera or Gallery – PhoneGap
【讨论】：
以上是关于Phonegap - 从图库中选择图像的主要内容，如果未能解决你的问题，请参考以下文章
使用 phonegap 在 IOS 的图库中查看使用 FileWriter 写入文件系统的图像文件
在 iOS 上使用 Phonegap 将图像转换为 Base64 字符串