选择文件，设置图像并上传而不阻止UI

Question

问题

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

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

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

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

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

演示

请参阅 this fiddle 。

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

阻止原因

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

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

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

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

我考虑的选项

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

2. 调整Web Worker中的原始图像数据的大小。不幸的是，我不知道img的格式是什么，所以调整大小需要处理所有图像类型。我不知道任何JavaScript库会做到这一点，我不想特别想编写自己的跨格式图像压缩库。

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

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

其他想法

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

我使用的是我认为使用FileReader获取数据网址的标准方法，然后将数据网址设置为img.src和canvas.drawImage以调整大小（有很多例子，一个是here）。任何有助于提高这种方法或其他方法的响应能力的帮助都将受到赞赏。

Answer 1

我认为你要做的是以下

1. 用户上传图片
2. 客户端向用户显示质量降低的图像。
3. 然后，客户端会将质量较差的图像上传到您的服务器以供日后使用。

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

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

我希望这会有所帮助!!!