How to get Image Object using Cordova?

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.

回答1:

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>

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

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/

回答2:

Similarly you can also load byteStream to the image tag

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

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