0

我们的团队开发了一个基于 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);      

 }
4

2 回答 2

0

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

于 2013-08-09T03:35:30.720 回答
0

通过查看您的代码，问题似乎是您在查询字符串中传递数据而不是使用请求正文（因为您正在设置 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"]

这应该按预期和一致地工作。

于 2013-08-08T07:33:39.233 回答