javascript - 选择文件、设置图像和上传而不阻塞 UI

Question

问题

我可以成功完成以下步骤，但 UI 可能对 2 MB 或更大的文件无响应。这些文件的大小在用户可能从他们的相机或桌面上传的范围内，因此我需要处理它们。

1. 用户使用标准文件输入 HTML 元素上传文件:

   <input class="cancel" type="file" name="userFile" id="userFile" accept="image/*"/>

2. 在客户端，我调整文件大小，使宽度为 500 像素或更小(特别是为了减小大文件的图像大小)并显示图像。

3. 在客户端，我上传调整大小后的较小文件。

演示

参见 this fiddle 。

在那里你可以看到 -上传较大文件时停止移动。延迟在 Chrome 中似乎比 Firefox 更明显，但在 Firefox 上仍然很明显。

阻塞原因

1. 在 img src 上设置文件数据 URL 时。这是必需的，以便可以在 Canvas 中调整图像的大小。

   img.src = e.target.result;//blocking here

2. 当 img 被写入 Canvas 时。这是调整图像大小所必需的。

   ctx.drawImage( img, 0, 0, width, height );//blocking here

我考虑过的选项

1. 在 Web Worker 中执行阻止操作。这是不可能的，因为 Web Worker 无法操作 DOM 元素，并且在操作 DOM 时都会发生阻塞调用。

2. 在 Web Worker 中调整原始图像数据的大小。不幸的是，我不知道 img 的格式是什么，所以调整大小需要处理所有图像类型。我不知道有任何 JavaScript 库可以执行此操作，而且我也不是特别想编写自己的跨格式图像压缩库。

3. 直接调整 img 的大小，但这不会改变需要上传的基础数据大小。

4. 在服务器上调整大小不是一种选择，因为我想减小上传大小。在客户端调整大小也更好，因为大图像的内存提前释放，调整后的图像立即显示。

其他想法

我知道设置 img src 是异步的，所以我猜这是导致阻塞的数据复制。我想知道是否有办法共享相同的数据而不是复制？

我正在使用我认为是使用 FileReader 的标准方法获取数据 URL，然后将数据 URL 设置为 img.src和 canvas.drawImage调整大小(有很多这样的例子，一个是 here )。任何有助于提高这种方法或另一种方法的响应能力的帮助，我们将不胜感激。

Answer 1

我假设您正在尝试执行以下操作

1. 用户上传图片
2. 客户端向用户显示质量降低的图像。
3. 然后客户端将降低质量的图像上传到您的服务器以备后用。

您遇到的问题是您强制 javascript(客户端)执行最有可能最好在服务器端完成的操作。至于以较低的分辨率显示图像，可以使用 drawImage 轻松实现.没有理由立即在客户端向用户显示实际缩小的文件。这是我的使用流程版本。

1. 用户上传图片。
2. 客户端将其上传到服务器，同时使用 drawImage 显示分辨率降低的版本。
3. 服务器运行一个类似这样的脚本one将其调整为请求的大小。
4. 然后，当将来需要使用该图像时，服务器会提供调整大小后的版本。

希望对您有所帮助!!!