HTML5 캔버스 크기 조정시 이미지 크기 제한 (<1MB)

Question

이미지 용 HTML5 업 로더가 있습니다. 사용자가 선택한 이미지에 대해 두 개의 이미지를 업로드합니다. 하나는 64x64이고 다른 하나는 320x240입니다. canvas.drawImage()을 사용하여 이미지의 크기를 조정하고 있습니다. 모든 것이 잘 작동합니다.

그러나 크기 조정 후 이미지가 < = 1MB인지 확인하려면 어떻게해야합니까? 크기를 조정 한 후의 이미지 크기는 사용중인 브라우저에 따라 다릅니다.

Answer 1

결과 압축 파일은 압축률에 따라 내용이 달라질 수 있으므로 크기를 보장 할 수 없습니다.

빈도가 높은 이미지 (세부 정보, 노이즈 등)가 많은 경우 압축하기가 어려우며 더 많은 데이터를 필터링하기 위해 더 강한 품질 설정 (JPEG 용)을 사용해야합니다.

하지만 이미지의 원시 크기를 계산할 수 있습니다. Canvas는 32 비트이며 RGB (24 비트) 용 8 비트 채널 3 개와 알파 용 8 비트 채널 1 개입니다. 당신은 PNG로 이미지를 저장하면

당신은 RGBA이있을 것이다 - 그의 크기는 다음과 같습니다

width * height * 3 = size in bytes 

JPEG 할 수 있습니다 당신은 JPEG로 밖으로 저장하면

width * height * 4 = size in bytes 

당신은 RGB있을 것이다 toDataURL(type [, quality= [0.0, 1.0]])에 대한 선택적 품질 매개 변수를 사용하여 PNG보다 더 압축 될 수 있으므로 크기를 더 줄일 수 있습니다. 하여 예 크기

원료 크기가 될 것이다 :

320 x 240 x 4 = 307 200 bytes (/ 1024 = 300 kb/1024 = 0.29 mb). 

및 RGB (알파 없음)와

는 화상 데이터-URI로 변환된다

320 x 240 x 3 = 230 400 bytes (/ 1024 = 225 kb/1024 = 0.22 mb). 

콘텐츠는 64 진수로 인코딩됩니다. Base-64는 데이터가 인코딩되는 방식으로 인해 실제로 크기에 33 %를 더합니다 (실제로 작은 헤더를 사용하여 실제로는 데이터를 생성합니다, IIRC는 약 14-20 바이트).

어쨌든이 경우 1MB 제한 내에 있어야합니다.