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

Question

如果我通过 javascript 在客户端创建动态位​​图，我如何通过 POST 或 GET 提交它（然后从服务器端的位图中解析出值？NodeJS、PHP 等）

从在 Javascript 中逐字节制作图像

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

Answer 1

只需上传 base 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。部分原因是它不合适，您没有从服务器检索任何内容。但更多的是因为 GET 对 URL 长度设置了一些限制，所以您的图像数据可能不适合。POST 没有这样的限制，因为请求可以有一个主体，这与 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'];

对于 getBase64Image 函数，请参阅这个 SO 问题 Get image data in JavaScript?