如何通过POST提交由Javascript生成的位图图像？

Question

如果我通过JavaScript在客户端创建动态位图，如何通过POST或GET提交它（然后在服务器端解析出位图中的值？NodeJS、PHP等）。来自使用JavaScript逐字节制作图像。 var src = 'data:image/bmp;base64,' + myBase64EncodedData;

- qodeninja

---

为什么不使用Ajax将值发送到服务器，并在您使用的任何语言中使用request.params['image']从服务器端检索？ - Srinivas Reddy Thatiparthy

Answer 1

只需上传base64数据，然后在服务器端解析它，以任何你喜欢的方式进行操作。

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长度的限制，您的图像数据可能无法容纳在其中。而POST方法没有这样的限制，因为请求可以有一个体，而不像GET方法一样。

- Alex Wayne

Answer 2

你可以像这样使用post..

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

关于 getBase64Image 函数，请参考这个 SO 问题 如何在 JavaScript 中获取图像数据？

- Amitd

---

谢谢您也提供了那个问题的参考！ - qodeninja