How do you submit a Javascript generated bitmap image via POST?

Question

If I create a dynamic bitmap on the clientside via javascript, how can I submit this via POST or GET ( and then parse out values from the bitmap on the serverside? NodeJS, PHP etc )

From Making Images Byte-by-Byte in Javascript

var src = 'data:image/bmp;base64,' + myBase64EncodedData;

Answer 1

Just upload the base 64 data. Parse it on the server side form there any way you like.

HTML:

<form id="uploadImage" method="POST">
  <input type="hidden" name="imageData64" id="imageData64"/>
  <input type="submit" value="upload"/>
<form>

JS:

document.getElementById('uploadImage').onsubmit = function() {
  document.getElementById('imageData64').value = myBase64EncodedData;
};

Or you could do the same with an ajax request.

You probably don't want to use GET though. Partly because it's not appropriate, you aren't retrieving anything form the server. But more because GET puts some limits on URL length, so your image data may not fit. POST has no such limit since the request can have a body, unlike GET.

Answer 2

You can use post like this..

HTML

<img src="whatever.jpg" id="myimage" />
<div id="button" data-role="button">Click on button</div>

JS

    $(function() {
        $("#button").click(function() {
              postImageData();
            });
    });

            function postImageData(){
var img = document.getElementById('myimage')
var myBase64EncodedData  = getBase64Image(img);
                $.ajax({
                    type: 'POST',
                    url: 'http://same_domain_url.com/',
                    data: { 
                        'imagedata': myBase64EncodedData 
                          },
                    success: function(msg){
                        console.log('posted' + msg);
                    }
                });
            }

php

 $imagedata=$_POST['imagedata'];

For getBase64Image function refer to this SO question Get image data in JavaScript?