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;

why not use ajax to post values to server and retrieve from server side with `request.params['image']` in whatever language you use? — Srinivas Reddy Thatiparthy, Oct 25 '12 at 20:48

Alex Wayne · Answer 1 · 2012-10-25T20:56:28.607

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.

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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?

Thanks for the reference to that question too! – qodeninja Oct 29 '12 at 05:09 — qodeninja, Oct 29 '12 at 05:09

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

2 Answers2

Linked