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

Question

问题

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

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

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

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

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

演示

看到这个小提琴.

在那里你可以看到-上传较大文件时停止移动.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用于获取数据URL 的标准方法,然后将数据URL设置为a img.src并canvas.drawImage调整大小(有很多这样的示例,其中一个在这里).任何有助于提高这种方法或其他方法的响应能力的帮助都将受到赞赏.

Answer 1

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

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

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

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

我希望这有帮助！！！