拖放JavaScript缩略图生成.由于超过base64限制，浏览器崩溃

Drag and drop JavaScript thumbnail generation. Browser crash due to base64 limit exceeded

本文关键字：限制 base64 浏览器 崩溃 于超过 JavaScript 略图 拖放      更新时间：2023-09-26

任务：

我的任务是在没有额外框架或服务器端的情况下使用JavaScript创建缩略图生成器。用户将图像拖放到拖放区域，并生成缩略图并将其显示在屏幕上。当你点击缩略图时，完整版本的图像应该出现在下一个选项卡中。

当前解决方案：

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

问题：

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

问题：

有没有绕过base64长度限制的变通方法？

是。

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

还可以看看MDN的文章，如使用对象URL来显示图像

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（而不是单击事件）将导致窗口被阻塞（请阅读此处和此处的详细信息）。

若要绕过这一点，您可以预先创建一个blob，这样当单击发生时，您可以立即显示图像。

相关文章：