Question

任务：

我的任务是使用JavaScript创建缩略图生成器，而无需其他框架或服务器端。用户将图像拖放到dropzone，并生成缩略图并显示在屏幕上。当您单击缩略图时，完整版本的图像应显示在下一个选项卡中。

当前解决方案：

我使用了一个不可见的canvas元素来绘制完整且已调整大小的图像版本，我使用canvas.toDataURL()保存它们并将此 base64 编码附加到 img 和 a 标记。

问题：

我遇到的问题与我可以删除的图像的文件大小有关。目前，当我上传超过2兆字节的图片时，缩略图会正确生成，但如果我想显示完整尺寸的图片，Chrome或Firefox会因base64长度限制而崩溃。

问题：

是否有绕过base64长度限制的解决方法？

Answer 1

是

您应该使用HTMLCanvasElement.toBlob创建Blob对象，然后使用URL.createObjectURL创建可用于通过或下载图像显示图像的临时URL。

另请参阅MDN文章，例如Using object URLs to display images

window.URL = window.URL || window.webkitURL;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF";
ctx.font="12px Verdana";
ctx.fillStyle = "#000000";
ctx.fillText("jpeg with",0,10);
ctx.fillText("quality 20 used",0,25);
ctx.fillText("intentionally",0,40);
ctx.moveTo(0,50);
ctx.lineTo(100,100);
ctx.stroke();
canvas.toBlob(function(blob){
	var img = document.createElement('img');
	var url = URL.createObjectURL(blob);
	img.src = url;
	img.onload = function(){
		URL.revokeObjectURL(url);
	}
	document.body.appendChild(img);
}, "image/jpeg", 0.20);

<p>may not work on stackoverflow, try jsfiddle in this case</p>
<canvas id="canvas" width="100" height="100"/>

请注意，由于canvas.toBlob接受回调，并且从回调调用window.open（而非点击事件）将导致窗口被阻止（阅读更多here和here ）。

要绕过此功能，您可以预先创建blob，因此当发生单击时，您可以立即显示图像。

拖放JavaScript缩略图生成。超出base64限制导致浏览器崩溃

1 个答案: