javascript - 캔버스 압축 이미지의 원리는 무엇입니까?

Question

캔버스의 toDataURL 메소드는 압축 후 이미지의 형식과 압축 품질을 지정할 수 있습니다. 예를 들어 webp 형식으로 압축합니다.

으아악

toDataURL이미지는 base64를 사용하여 인코딩되었으며, 인코딩된 소스 파일은 인코딩 전보다 33% 더 큽니다. 주소를 참조하세요. 하지만 품질 매개변수는 압축 품질이 0에 가까울수록 이미지가 커진다는 것을 의미합니다. 압축.

질문 1: base64 인코딩을 사용하여 이미지 소스 파일을 확대하면 base64가 이미지를 압축할 수 있나요?

질문 2: 단지 http 요청을 줄이기 위해 작은 이미지를 base64로 인코딩하는 것인가요?

질문 3: 캔버스에서 toDataURL 메서드를 사용하여 이미지를 압축하는 원리는 무엇인가요? 품질 매개변수의 역할은 정확히 무엇인가요?

Answer 1

base64는 6비트가 하나의 문자에 해당한다는 규칙에 따라 이미지에 해당하는 바이너리 코드만 변환합니다. 트랜스코딩 후에는 파일이 원본 이미지 파일보다 큽니다. 그러나 작은 이미지의 경우 변환 후 전송되는 추가 바이트는 추가 http 연결을 설정하는 것보다 훨씬 저렴하므로 페이지 로딩 속도를 향상시키기 위해 작은 이미지를 트랜스코딩하는 데 base64가 사용됩니다.
이미지 압축의 원리는 간단히 말하면 알고리즘을 통해 사진의 색상 차이를 줄여서 화질이 저하되는 것입니다. 예를 들어, 유사한 색상을 가진 4개 픽셀의 색상 정보는 압축 전 약 16바이트를 차지하며, 압축 후 하나의 색상으로 변환하면 거의 4배 정도 줄어들 수 있습니다. 품질은 색상 차이의 강도를 제어하는 ​​데 사용됩니다. 값이 작을수록 강도가 높아지며, 색상 차이가 큰 두 픽셀도 처리되므로 압축 후 파일 크기가 작아집니다. 그럴 것이다.

Answer 2

1. 안돼

2. 는

3. 이미지 인코딩 형식의 품질을 제어합니다. 예를 들어 webp는 손실 압축을 수행할 수 있으며, 품질이 높을수록 파일 크기는 커집니다.