캔버스를 사용하여 이미지를 압축하는 html5용 샘플 코드

이 글에서는 캔버스를 사용하여 HTML5에서 이미지를 압축하는 샘플 코드에 대한 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공합니다.

이틀 전에 업로드를 위해 이미지를 base64로 변환하는 기능을 만들었습니다. 이미지의 base64가 너무 크면 요청이 매우 느려지고 시간 초과가 심각한 것으로 나타났습니다. 그래서 업로드하기 전에 이미지를 클릭한 다음 배경에 업로드하면 효율성이 크게 향상될 수 있다고 생각했습니다. 다음은 캔버스를 사용하여 이미지를 압축할 때 발생하는 몇 가지 함정입니다. 전체 코드는 기사 마지막 부분에 제공됩니다.

첫 번째 함정은 이미지를 압축할 때 이미지 자체의 너비와 높이를 가져오지 않고, 휴대폰에서 고정된 너비와 높이를 600*480으로 준다는 점입니다. , 이미지를 몇 메가바이트씩 업로드할 때 사용되므로 별 문제가 없습니다. 테스트 중 업로드된 사진이 모두 작은 사진이었는데, 압축된 사진이 완전히 표시되지 않고, 대부분이 압축 시 원본 너비를 고려하지 않았기 때문에 문제가 발생했습니다. 그리고 사진의 높이.

두 번째 함정, 첫 번째 함정을 해결하는 방법은 이미지가 로드(onload)된 후 이미지 자체의 너비와 높이를 가져온 다음 이를 캔버스에 할당하고, 하지만 함정은 이미지 로딩이 비동기식이며, 반환할 때 필요한 압축된 base64 대신 반환되는 내용이 정의되지 않을 수 있다는 것입니다. 여기서 해결 방법은 새 Promise를 생성한 다음,solve()가 결과를 반환하고, .then()이 호출 시 결과를 가져오는 것입니다.

지식:

• canvas's toDataURL('image/png', 0.9); 그려진 그림은 base64로 변환됩니다. 첫 번째 매개변수는 그림의 유형을 나타내고 두 번째 매개변수는 그림의 선명도를 나타냅니다.

• 이미지 자체의 너비와 높이가 이 크기보다 큰 경우 가장 큰 면에 따라 크기를 조정하고 다른 면에 따라 설정합니다. 이미지의 비율을 정한 후 캔버스를 주세요 🎜🎜#위 내용은 이 글의 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다!

위 내용은 캔버스를 사용하여 이미지를 압축하는 html5용 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!