100MB 이상의 이미지 파일 API를 사용하는 이미지 미리보기 broswer를 동결합니다.

Question

먼저,이 문제와 관련된 모든 SE 질문을 검색하여 읽었으며 아직까지는 좋은 대답이 아닌 것으로 생각됩니다. (작동 예제 포함)

그래서, 여기 내가 달성하고자하는 것이 있습니다 : 사용자가 브라우저에서 이미지를 선택하고 filereader를 사용하여 업로드하기 전에 미리보기를 생성합니다. 문제는 50MB 또는 100MB 이상의 대용량 파일로 인해 브로스워스가 멈추는 경우입니다.

수십 개의 솔루션을 시도했지만 브라우저의 UI가 정지 된 것 같습니다. 양질의 미리보기를 생성하기 위해 필자는 파일 판독기와 캔버스를 사용하여 이미지를 축소하는 보간법을 사용합니다. 내가 눈치 무엇

아래쪽 규모와 보간이 발생하고 canvas.toDataURL("image/png"); 전화

동안 때 동결이 일어나는 (아마도 웹 근로자를 사용하고 계십니까?)이를 방지 할 수있는 방법이 있나요 일어나는 것입니다? 제가 말했듯이, 저는 몇몇 라이브러리를 시도하고 스택 질문의 대부분을 읽었지 만,이 문제와 관련된 질문에는 대답이 없습니다.

나는이 두 가지 문제를 건너했습니다

• readAsDataURL base64로 돌아갑니다 인코딩 (Base64로 그래서 이것이 파일 크기보다 1백37퍼센트 큰 50메가바이트/100메가바이트 이상 이미지 라인 매우 긴) 시스템 메모리에 보관 - 그래서 이미지가로드되는 동안, canvas.toDataURL()에서 전체 페이지가 일시 큰 이미지를로드 할 때이 성능 문제
• 수 있습니다

이 작업을 수행하고 잘 작동하며 몇 가지 예를 제공하고 설명 할 수있는 사람이 있다면 정말 대단합니다.

Answer 1

모질라는 예제 here readAsDataURL 사용 방법을 제공합니다. 50MB 이미지로 시도하고 완벽하게 작동합니다 (ImageJ 10000 * 10000 픽셀 임의 값 RGB를 사용하는 이미지를 만들기 위해). 난 toDataURL() 함수는 브라우저에서 읽을 수없는 매우 긴 문자열을 만듭니다 생각합니다.