javascript - Javascript で生成されたビットマップ イメージを POST 経由で送信するにはどうすればよいですか?

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

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?