Question

我之前已经看过这个问题，但我认为我有一个不同的案例所以我会以任何方式发布它。所以我的问题很简单，就像主题所说的那样。我有一个写入画布的图像，我可以将其转换为数据，然后将它保存在远程服务器上。

我尝试了如下的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是不可能的。我想知道我的想法是否正确，还是有另一种解决这个问题的方法。

我试图做的第二个选项是手动创建一个表单，然后包含输入类型文件然后我意识到我不能用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();

因此，作为一种解决方法，我认为我的选择是使用websocket并为Web客户端创建客户端服务器应用程序以与服务器套接字（Java）通信我之前没有做过websockets所以请告诉我这是否是可行或者Access-Control-Allow-Origin问题也适用于此。

Answer 1

事实证明，网络套接字解决方案对我来说就像一个魅力。我从Web客户端创建二进制流，然后从python后端的服务器套接字读取它。唯一的问题是二进制转换和传输增加了巨大的开销。如果有人需要代码，请回复。

将从画布获取的图像上载到服务器

1 个答案: