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

admin管理员组

文章数量:1387356

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;

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;

• javascript
• post
• bitmap

Share Improve this question Follow asked Oct 25, 2012 at 20:44 qodeninjaqodeninja 11.3k3232 gold badges102102 silver badges155155 bronze badges 1

• 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 Commented Oct 25, 2012 at 20:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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./',
                    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?

本文标签： How do you submit a Javascript generated bitmap image via POSTStack Overflow