使用File API对超过100MB的图像进行图像预览会冻结broswer

时间:2016-08-22 11:26:24

标签: javascript performance image-processing filereader

首先,请注意我已经搜索过并阅读了我认为关于这个问题的所有SE问题,并且到目前为止还没有一个好的答案! (有一个工作示例)

所以,这就是我想要实现的目标:用户在浏览器中选择图像并使用文件阅读器我将在上传之前生成预览。问题是大文件,超过50MB或100MB图像冻结了broswer

我一直在尝试几十种解决方案,但似乎都冻结了浏览器的UI。为了生成高质量的预览,我使用文件阅读器和画布进行一些插值来缩小图像。

我注意到,当缩小和插值发生时以及canvas.toDataURL("image/png");调用期间发生冻结

有没有办法避免这种情况(可能使用网络工作者?)发生?正如我所说,我尝试了一些库并阅读了大部分的堆栈问题,但与此问题相关的问题没有答案。

我遇到过这两个问题:

     
  • readAsDataURL将返回base64编码且非常长    超过50MB / 100MB图像的行(base64比文件大137%    大小,所以它保存在系统内存中) - 所以这可能是一个性能问题
  • canvas.toDataURL()加载大图片时,整个页面在加载图片时冻结

如果有人这样做并且运作良好并且可以提供一些示例并进行解释,那就太棒了。

1 个答案:

答案 0 :(得分:0)

Mozilla给出了一个示例here如何使用readAsDataURL。我尝试使用50MB图像并且工作正常(对于创建图像我使用ImageJ 10000 * 10000像素随机值RGB)。我认为toDataURL()函数会创建一个非常长的字符串,使浏览器无法读取。