在javascript中为加载图像创建进度条

Question

我正在创建一个网页，该网页生成在线 svg 图像，然后允许用户以各种格式下载它们。 (png,jpg,jpeg,svg) 我有一个导出功能，可以将图像从内联 svg 转换为画布，然后将画布转换为 dataURL 以供下载。当我尝试使用 Chrome 导出时，由于 Chrome 的数据上限，将较大的图像（7,000x10,000 像素）缩小到画布需要时间。 （FF 没有任何问题，可以在很短的时间内缩小大量图像，而 chrome 可以）

当图像需要一段时间才能从画布中填充和下载时，我需要创建一个加载进度条。我尝试了this answer 中的解决方案无济于事，因为我使用的是从 svg blob 而不是服务器上的图像文件创建的 objectURL。

在使用 objectURL 设置图像 src 时，有没有办法查看图像加载的进度。

canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d',{alpha:false});

// creates a new blank image
var img = new Image();

// encode the svg to a string
var data = (new XMLSerializer()).serializeToString(svg);

// creates a blob from the encoded svg
 var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});

// creates an object url for the download
var url = DOMURL.createObjectURL(svgBlob);

// when the image is done being created and its loaded
img.onload = function(){ /* drawImage to canvas and save as dataURL*/ }

// load the image src using the objectURL
img.src = url;

当url是objectURL而不是图像文件时，有没有办法读取图像加载的进度？

Answer 1

简短的回答，我不知道按照您的要求去做。正如您所说，您不是从服务器下载，因此没有“onprogress”事件可以挂钩。您需要一些东西来从 createObjectURL 函数内部提供定期警报，并且它没有提供一个事件来挂钩，它会在处理过程中触发 20 次以给您一个状态。

您可以做的是估计在 Chrome 中需要多长时间，并以这种方式提供估计的状态栏。如果您知道您的画布有多大，您可以根据 Chrome 的固定数据上限估算出 Chrome 生成图像需要多长时间。如果 7Kx10K 图像需要 x 秒，由于固定的数据上限，通常每次生成都需要相同的时间，对吗？做一些数学运算，根据整体像素计算出秒数。如果需要 100 秒来处理（或任何时间），那么就是 700,000 像素/秒。同样，由于固定数据上限，该值应保持不变，直到 Chrome 在新版本中更改其数据上限。

然后您可以提供一个模拟进度条，该进度条以您拥有的总像素数以该速度前进。如果您有 7M 像素，那么将条形图从 0 推进到 100% 应该需要 10 秒（基于我的 700Kpx/秒的采样率）。

这一切都基于具有固定数据上限的 Chrome；你可以根据你必须处理的像素数来计算一个数学比率。