相关疑难解决方法(0)

"data:"URL方案值是否有任何大小限制？我对流行的网络浏览器的局限感兴趣.换句话说,多久可以data:image/jpg;base64,base64_encoded_data成为<img src="data:image/jpg;base64,base64_encoded_data" />或background-image: url(data:image/jpg;base64,base64_encoded_data)？

我想使用fabric.js将Canvas下载为PNG.在下载时我想缩放图像.所以我使用multiplier了toDataURL()函数的属性.但我得到了失败 - 网络错误

PS:如果我不给multiplier属性,它正在下载,但我确实想要使用multiplier属性,因为我必须缩放图像

这就是我在做的事情:

HTML代码:

<canvas width="400" height="500" id="canvas" ></canvas>
 <a id='downloadPreview' href="javascript:void(0)"> Download Image </a>

JS

document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false);

var _canvasObject = new fabric.Canvas('canvas');

var downloadCanvas =    function(){
    var link = document.createElement("a");

link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4});
      link.download = "helloWorld.png";
     link.click();

}

我在Google Chrome中遇到了下载问题.我使用的是Ruby 2.2,Rails 4.2,AngularJS 1.2.

我们这里没有数据库.我们通过API获得的一切.我们试图下载的文件大约是7 MB.它给我们"失败:网络错误".虽然它在Firefox上运行良好.

从API我们获得JSON中的二进制数据.我们正在解析它.然后:

send_data response_fields["attachment"], type: response_fields["mimeType"], disposition: 'attachment', filename: params[:filename]

当我们使用AngularJS时,我们在AngularJS Controller中捕获该值,然后将其转换为:

var str = data;
var uri = "data:" + mimeType + ";base64," + str;

var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

这适用于Firefox甚至Chrome,适用于较小的文件大小.不知道为什么它会在Chrome上为更大的尺寸提供错误.

有什么建议？

谢谢.

我试图使用canvas.toDataURL()下载整个画布图像.图像是在画布上呈现的地图(打开图层3).

在Firefox中,我可以使用以下内容通过点击链接下载地图:

var exportPNGElement = document.getElementById('export_image_button');

if ('download' in exportPNGElement) {
    map.once('postcompose', function(event) {
    var canvas = event.context.canvas;
    exportPNGElement.href = canvas.toDataURL('image/png');
});

map.renderSync();

} else {
alert("Sorry, something went wrong during our attempt to create the image");
}

但是在Chrome和Opera中,我对链接的大小限制.我必须在物理上使窗口更小,以便下载工作.

浏览器之间存在大小限制差异,Chrome特别受限制.这里的类似帖子(现在已超过2年)表明了一个广泛的服务器端解决方法:

canvas.toDataURL()用于大画布

是否有客户端为此工作？