如何使用Cordova获取图像对象？ [英] How to get Image Object using Cordova?
本文介绍了如何使用Cordova获取图像对象？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用getPicture时，我们会得到一个相对URL或base64图片。但我想发送一个图像对象到Amazon S3。
<$ c $ c> //按钮将调用此函数
//
function capturePhoto（）{
//使用设备摄像头拍摄图片，并将图片检索为base64编码的字符串
navigator。 camera.getPicture（onPhotoDataSuccess，onFail，{
destinationType：Camera.DestinationType.DATA_URL，
quality：50
}）;
}
现在我需要获取图像作为对象转换为字节数组并使用REST（PUT）调用将其上传到Amazon S3。
解决方案
确保您可以
相机/图片源代码
html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta content =telephone = noname =format-detection>
<！ - 警告：对于iOS 7，请删除width = device-width和height = device-height属性。请参阅https://issues.apache.org/jira/browse/CB-4323 - >
< meta content =
user-scalable = no，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，width = device-width，height = device-height， target-densitydpi = device-dpi
name =viewport>
< script src =cordova.jstype =text / javascript>< / script>
< script src =js / index.jstype =text / javascript>< / script>
< title> Camera Cordova插件< / title>
< / head>
< body>
< button onclick =capturePhoto（）;>捕获照片< / button>< br>
< button onclick =getPhoto（pictureSource.PHOTOLIBRARY）;> From Photo
Library< / button>< br&
< img id =imagesrc =style =display：none; width：100％;>
< / body>
< / html>
js
function onPhotoDataSuccess（imageURI）{
//取消注释以查看base64编码的图像数据
console.log（imageURI）;
//获取图像句柄
//
var cameraImage = document.getElementById（'image'）;
//取消隐藏图片元素
//
cameraImage.style.display ='block';
//显示捕获的照片
//内联CSS规则用于调整图像大小
//
cameraImage.src = imageURI;
}
function capturePhoto（）{
//从指定来源检索图片文件位置
navigator.camera.getPicture（onPhotoDataSuccess，onFail，{
quality：30，
targetWidth：600，
targetHeight：600，
destinationType：destinationType.FILE_URI，
saveToPhotoAlbum：true
}
}
文件传输源代码
js
function upload（）{
var img = document.getElementById（'image'）;
var imageURI = img.src;
var options = new FileUploadOptions（）;
options.fileKey =file;
options.fileName = imageURI.substr（imageURI.lastIndexOf（'/'）+ 1）;
options.mimeType =image / jpeg;
var params = new Object（）;
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer（）;
ft.upload（imageURI，https://www.example.com/upload.php，win，fail，
options）;
}
function win（r）{
console.log（Code =+ r.responseCode）;
console.log（Response =+ r.response）;
console.log（Sent =+ r.bytesSent）;
}
function fail（error）{
alert（发生错误：Code =+ error.code）;
console.log（upload error source+ error.source）;
console.log（upload error target+ error.target）;
}
php
<？php
move_uploaded_file（$ _ FILES [file] [tmp_name]，'/ path / to / file'）;
参考文献：
http://blog.revivalx.com/2014/05/05 / tutorial-camera-cordova-plugin-for-ios-and-android /
http://blog.revivalx.com/2014/07/12/upload-image-using-file-transfer-cordova-plugin- for-ios-and-android /
When use use getPicture either we get a relative URL or base64image. But I want to send a image object to Amazon S3. Anyway to do that ?
Here is how I am getting the base64image
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
destinationType: Camera.DestinationType.DATA_URL,
quality: 50
});
}
[UPDATE] Now I need to get the image as object convert it to byte array and upload it to Amazon S3 using REST (PUT) call.
解决方案
sure you can
camera/image source code
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta content=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
name="viewport">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<title>Camera Cordova Plugin</title>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button><br>
<img id="image" src="" style="display:none;width:100%;">
</body>
</html>
js
function onPhotoDataSuccess(imageURI) {
// Uncomment to view the base64-encoded image data
console.log(imageURI);
// Get image handle
//
var cameraImage = document.getElementById('image');
// Unhide image elements
//
cameraImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
cameraImage.src = imageURI;
}
function capturePhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
saveToPhotoAlbum: true
});
}
file transfer source code
js
function upload() {
var img = document.getElementById('image');
var imageURI = img.src;
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var params = new Object();
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "https://www.example.com/upload.php", win, fail,
options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
php
<?php
move_uploaded_file($_FILES["file"]["tmp_name"], '/path/to/file');
References:
http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/ http://blog.revivalx.com/2014/07/12/upload-image-using-file-transfer-cordova-plugin-for-ios-and-android/
这篇关于如何使用Cordova获取图像对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
