Question

如果我创建一个大型Canvas并向其添加数据（例如，1024x768），那么尝试通过AJAX将imagedata发布到PHP文件（为了将其保存到文件中），该选项卡在Google Chrome中崩溃

在Firefox中，选项卡本身不会崩溃，但PHP文件似乎是在没有POST变量的情况下调用的。

这是一个太大的任务尝试，还是我做错了什么？我意识到涉及很多数据。

Answer 1

遇到了类似的问题，我发现toDataURL（）字符串对我的Web服务器来说太长了，而且它是一个我无法改变的suhosin设置。通过测试canvas.toDataURL（）。length，我发现断点大约是950,000个字符。我创建了一个测试toDataURL字符串长度的函数，如果它超过900,000，它会调整大小，直到它达到服务器可以处理的大小。

显然，结果是比原始图像更小的图像，但它适用于我的目的。希望它有所帮助：

/*Make sure origImg is a global variable, the first parameter 
you are sending to the function is an image object and the first size
parameter is 100*/

var origImg = new Image();
origImg.src = canvas.toDataURL();

var canvasDataForServer = makeSmallCanvas(origImg,100);

function makeSmallCanvas(orig,size) {
  var img = orig;
  img.width = img.width * (size / 100);
  img.height = img.height * (size / 100);

  var smallCanvas = document.createElement("canvas");
  smallCanvas.width = img.width;
  smallCanvas.height = img.height;
  sctx = smallCanvas.getContext('2d');
  sctx.drawImage(img,0,0,img.width,img.height);

  var retStr = smallCanvas.toDataURL();
  if(retStr.length < 900000) {
    return retStr;
  } else {
    return makeSmallCanvas(origImg,size-1);
  }
}

通过AJAX发送Canvas ImageData会导致Google Chrome崩溃

1 个答案: