appgyver steroids image handling post image from capture

Question

i wonder if there's anyone who tried to take a image using a steroids application and post it to a backend through api?

The only thing i found about image handling in their own documentation is how to capture images and how to save them in a base64 encoding, but how do i use the base64 encoded image and is there possible to post them through an api?

code example:

$scope.startCapture = function () { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }

    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }

Answer 1

i'm not familiar with your environment and hope that i understand your problem correctly, but a base64 encoded Image is nothing more than a string. You can use them like a physical Image i.e. in a Stylesheet like this:

backround-image: url('data:image/jpeg;base64,AQFiEW=....');

To send this Image through an HTTP-Request to an API, you can put the value in the Request like in the following simple Example (jQuery). Be sure you POST them, GET cant handle infinity Data Length (POST cant even, but its configurable up to 2GB [in PHP]) and an image converted to base64 has significantly more data than the original Image (i.e. 5%-10%)

$.ajax({
    url: '/api/action',
    type: 'POST',
    data: {'image': 'data:image/jpeg;base64,AQFiEW=....'}
}).done(function(msg){
    alert("Image send");
}).error(function(msg){
    alert("Image sending failed: " + msg);
});

Answer 2

I can't take credit for this because I am certain I got this info from Stack somewhere...I am looking to do something different but I saw your question and figured I'd share what I found. This uses the Supersonic setup (Steroids, Angular, etc) on the front-end and a NodeJS back-end:

`$scope.takePhoto = function() {

var options = {
    quality: 90,
    allowEdit: true,
    targetWidth: 600,
    targetHeight: 1132,
    encodingType: "jpg",
    saveToPhotoAlbum: false,
    destinationType: "dataURL"
};

supersonic.media.camera.takePicture(options).then(function(result) {

    formData.append('file', result);

    $http({
            url: "http://YOURSERVER",
            method: "POST",
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            },
            data: formData

        })
        .success(function(result) {
            //further logic
            supersonic.logger.info("Success!! Sent Photo ");
        }).
    error(function(data, status, headers, config) {
        supersonic.logger.info("Failure!  STATUS --- " + status);
        supersonic.logger.info("Failure!  DATA --- " + data);

    });



});

};