Question

我们的团队开发了一个基于JS HTML5画布的绘图应用程序。在以下代码中，图像数据作为base 64编码从画布中获取，并通过ajax发布到servlet。数据发布不正常。如果图像很简单，就像在直线上一样，我得到Ajax status = 200并保存图像。如果图像很复杂，那么我得到状态= 400并且不保存数据。为什么POST的内容会因发布数据本身而产生问题？

function getCode(){

 var canvas = document.getElementById('imageView');
 var context = canvas.getContext('2d');

 // draw cloud
  context.beginPath();

 // save canvas image as data url 
  var dataURL = canvas.toDataURL();

  // set canvasImg image src to dataURL
  // so it can be saved as an image
   document.getElementById('canvasImg').src = dataURL;

  var uri= document.getElementById('canvasImg').src;


  uri = uri.replace('data:image/png;base64,','');
  uri = uri.replace('=', '');

  uri = uri.trim();

 alert("uri is "+uri);

  var ajaxobject ;
    if(window.XMLHttpRequest){
    ajaxobject = new XMLHttpRequest();
    } else if(window.ActiveXObject){
      ajaxobject = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.ActiveXObject){
     ajaxobject = new ActiveXObject("Msxml2.XMLHTTP");
    }




   ajaxobject.open("POST", "SaveImageServlet?image="+uri, true);
   ajaxobject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   ajaxobject.onreadystatechange = function(){

   if(ajaxobject.readyState==4){
    alert(ajaxobject.status);
     if(ajaxobject.status==200){
    alert(ajaxobject.responseText);     
    }}
  };
  ajaxobject.send(null);      

 }

Answer 1

通过查看代码，问题似乎是你在查询字符串中传递数据而不是使用请求体（正如你在设置POST动词时应该这样做）。

你的uri应该是这样的：

SaveImageServlet

没有问号和参数。该参数应在请求体中设置。使用jquery ajax，您的请求将如下所示：

$.ajax({
contentType: 'text/plain',
data: {
    "image": yourBase64string
},
dataType: 'application/json', // or whatever return dataType you want
success: function(data){
    // callback in case of success
},
error: function(){
    // callback in case of error
},
type: 'POST',
url: '/SaveImageServlet'
});

在服务器端，您应该从适当的位置读取数据。例如，如果您正在使用.Net，请按以下方式阅读：

Request.Form["image"]

而不是：

Request.Querystring["image"]

这应该按照预期和一致的方式运作。

Answer 2

@Matteo，感谢您的帮助和努力。但是，AJAX问题从未得到解决。我找到了一种将base64图像数据发送到servlet的方法。只需将其附加到隐藏字段并将其作为常规表单字段发送。

AJAX POST状态不一致400。图像复杂性的问题

2 个答案: