如何使用Cordova獲取圖像對象？

當使用getPicture時，我們會得到一個相對URL或base64image。但我想將圖像對象發送到Amazon S3。無論如何要做到這一點？如何使用Cordova獲取圖像對象？

這裏是我如何得到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 
    }); 
}

[更新]現在我需要獲取圖像爲研究對象將其轉換爲字節數組，並使用REST上傳到亞馬遜S3（PUT）調用。

來源

2014-10-02 Sumit Sahoo

相信你能

相機/圖像源代碼

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>

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 
    }); 
}

文件傳輸源代碼

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');

參考文獻：

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/

來源

2014-10-02 05:43:16

非常感謝。我會嘗試一下:-) – 2014-10-02 05:55:02

我試過這個，但我發現需要獲取圖像對象並將其轉換爲字節數組，然後作爲REST調用上傳（PUT）。感謝您的幫助，我將我的代碼更改爲具有URL並將圖像存儲在圖庫中。現在我需要以某種方式將其轉換爲Object並調用REST服務。 – 2014-10-03 06:03:39

你可以從博客下載源代碼 – 2014-10-03 08:48:34

同樣，你也可以加載字節流的圖像標籤

 function(success) { // Assuming you are sending the bytestream from the code 

     var img = document.getElementById('image'); 
     img.src = 'data:image/png;base64,' + success.bytestream; 
     }

來源

2014-11-25 06:21:27

如何使用Cordova獲取圖像對象？

回答

相關問題