您如何通过帖子提交JavaScript生成的位图映像

Question

如果我通过JavaScript在客户端创建动态位图，我该如何通过帖子提交或获取（然后从Serverside上的位图中解析值？Nodejs，php等）

通过在JavaScript中制作图像字节

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

Answer 1

只需上传基本64数据即可。您喜欢的任何方式在服务器端形式上解析它。

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;
};

或者您可以使用Ajax请求进行相同的操作。

您可能不想使用Get。部分是因为它不合适，因此您没有检索服务器形成的任何内容。但更多是因为获得了URL长度的一些限制，因此您的图像数据可能不合适。帖子没有这样的限制，因为该请求可以有一个主体，与Get不同。

Answer 2

您可以使用这样的帖子..

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'];

getBase64图像函数请参阅此问题在JavaScript中获取图像数据？