选择文件，设置图像和上传不阻塞UI

Question

问题

我可以成功地实现以下步骤，但用户界面可能会对2MB或更大的文件没有响应。这些文件的大小与用户可能从相机或桌面上传的文件大小相同，所以我需要处理它们。

>

在客户端，我调整了文件的大小，使其宽度小于等于500px（特别是为了减小大文件的图像大小），并显示图像。

在客户端，我上传了大小较小的文件。

演示

看这把小提琴。

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

堵塞原因

>

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

img。src=e.target。结果//在这里阻塞

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

ctx.draw图像（img，0,0，宽度，高度）；//这里阻塞

我考虑过的选择

>

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

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

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

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

其他的想法

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

我正在使用我认为是标准的方法，使用FileReader获取数据URL，然后将数据URL设置为img。src和画布。drawImage来调整大小（这里有很多这样的例子）。如果您能帮助我们提高这种或另一种方法的响应能力，我们将不胜感激。




Answer 1

我想你要做的是

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

你遇到的问题是，你强迫javascript（客户端）做一些最有可能在服务器端完成的事情。至于以较低的分辨率显示图像，这可以通过使用绘图轻松实现。没有理由立即在客户端向用户显示实际的精简文件。这是我对您的使用流程的版本。

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

我希望这有帮助！！！