相关疑难解决方法(0)

我.toDataURL()对大帆布有问题.我想base64在php文件中加入并解码,但如果我有一个大画布,那么strDataURI变量是空的.

我的代码:

var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.substr(22, strDataURI.length);
$.post("save.php",
{ 
   str: strDataURI
};

是否有任何替代.toDataURL()或某种方式来改变大小限制？

谢谢.

我正在使用javascript和html画布来调整jpeg图像的大小.调整大小后,我将其canvas.toDataURL用作锚标记中的href属性,以便提供用户可以下载已调整大小的图像的链接.

这可以很好地达到某个图像大小.

似乎不同的浏览器对数据网址的大小有不同的限制,如下所述:https: //developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

在chrome中,当我超过数据URL大小限制时,单击下载链接时没有任何反应; 没有错误或任何事情(据我所知).

有没有办法以编程方式检测数据网址是否过大？也许某些浏览器事件会告诉我点击下载链接是否失败？

理想情况下,我想检测下载是否成功.当数据网址太大时,我想向最终用户显示一个解释,说明如何右键单击图像并选择"另存为...",这似乎总是有效.

更新1:

看起来使用canvas.toBlob是目前最好的解决方法.这是api文档:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob.

这是一个jsfiddle,演示了当使用toDataURL更大的画布时,锚点href下载链接如何失败,但toBlob似乎有效:

https://jsfiddle.net/upgradingdave/c76q34ac/3/

以下是一些相关的stackoverflow问题: canvas.toDataURL()下载大小限制

数据协议URL大小限制

我试图toBlob在下面的代码中点击一个按钮下载一个大的画布图像(几千像素的高度和宽度),这似乎不起作用:

document.getElementById("download_button").onclick = function() {

  var link = document.createElement("a");
  link.download = "image.png";

  canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    console.log(blob);
  },'image/png');

  console.log(link.href);
  link.click();

}

console.log(blob) 在回调函数中返回: Blob {size: 64452, type: "image/png"}

但console.log(link.href)什么都不回报.

我没用.createObjectURL正确吗？

我曾经使用过toDataURL,但它停止在某个画布大小之上工作.并且这篇文章建议使用canvas.toDataURL()下载大小限制toBlob.