0

以前にこの質問があったのを見たことがありますが、別のケースがあると思うので、とにかく投稿します。したがって、私の質問は非常に単純で、トピックが言うとおりです。キャンバスに書き込んだ画像があり、それをデータに変換してリモート サーバーに保存できます。

次のようにAJAX XHttpを試しました

imageformdata.append("FILE_NAME", filename);          
imageformdata.append(filename, image);
var oReq = new XMLHttpRequest();
oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      document.getElementById('response').innerHTML = "Uploaded!";
    } else {
      document.getElementById('response').innerHTML = "not Uploaded!";
    }
 };
oReq.open("POST", "http://localhost:18000/");
oReq.send(imageformdata);

しかし、サーバーを編集してAccess-Control-Allow-Originを回避することはできないので、AJAXは問題外のようです。私の考えが正しいかどうか、またはこの問題を回避する別の方法があるかどうかを知りたいです。

私がやろうとした2番目のオプションは、フォームを手動で作成してから入力タイプのファイルを含めることでした.Javascriptでファイルを選択できない、または選択できることに気付きました。私のコードは次のとおりです。

var form= document.createElement('form');
var input = document.createElement('input');
input.type = 'file';
form.method = "POST";
form.action = "http://localhost:17999/";            
var image = new Image();
image.onload = function(){
    localcontext.drawImage(image,0, 0);
};
image.src = "img/1.jpg";          

input.value = localcanvas.toDataURL('image/jpeg');
form.appendChild(input);
var now = new Date();
filename = filename+"_"+now.getFullYear()+ now.getMonth() +now.getDate()+"_"+now.getHours()+now.getMinutes()+now.getSeconds()+ ".jpg";
form.appendChild(input);
document.body.appendChild(form);
form.submit();

したがって、回避策として、Webソケットを使用し、Webクライアントがサーバーソケット（Java）と通信するためのクライアントサーバーアプリケーションを作成することが私のオプションだと思います。以前にWebソケットを行ったことがないので、これが実行可能かどうか教えてくださいAccess-Control-Allow-Origin の問題はこれにも当てはまります。

4

1 に答える 1