Html5 캔버스 크기 조정

캔버스를 사용하여 클라이언트 측에서 이미지 크기를 조정 한 다음 해당 이미지를 서버에 업로드합니다. 내 의도는 원래 크기의 절반으로 이미지의 크기를 조정하고 파일 크기가 줄어들고 싶었습니다. 그러나 크기가 조정 된 이미지 크기는 항상 원본보다 큽니다. 예를 들어Html5 캔버스 크기 조정

I은 1296 X 968 (JPEG 파일)에 치수 (X)가 1,936 2,592 2.5 MB JPEG 이미지 파일의 크기를 조정하고, 서버에 업로드하기 위해 노력 하였다. 서버에서 파일이 3.5MB 크기로 저장된다는 것을 알았습니다.

html5 캔버스로 크기를 조정할 때 할 수있는 것이 있기 때문에 크기를 줄이면 압축과 같은 파일 크기가 약간 줄어들 수 있습니다.

출처

2011-08-23 Que

캔버스를 통해 이미지를로드하는 것에 대해 쪼그리고 앉는 것을 알고 있지만 궁금해 할 수 없습니다. JPEG로 시작하여 PNG로 끝나나요? –

이미지 파일 형식을 유지하고 있습니다. – Que

JPEG 압축을 확인하십시오. 예를 들어 크기가 축소되고 100 % 품질로 다시 인코딩 된 70 % 품질의 JPEG는 원본보다 클 수 있습니다. – Seth

toDataURL을 사용하는 경우 두 번째 인수를 0.0과 1.0 사이의 숫자로 설정할 수 있습니다. 이것은 JPEG 품질 수준으로, 1.0은 매우 높은 품질을 의미하고 매우 큰 이미지는 0.0에 가까우므로 더 낮은 품질의 작은 이미지를 의미합니다.

그래서, 예를 들어, 당신이 시도 할 수 :

data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

가 여기에 W3C 기준에 대한 설명입니다 : www.w3.org: toDataURL

이 품질을 무시하고 함께 할 수있는 파이어 폭스에서 버그가 계속 것처럼, 따라서 최신 브라우저에서 테스트해야 할 수도 있습니다.

출처

2011-08-30 12:21:55 andrewmu

Html5 캔버스 크기 조정

답변

관련 문제