JavaScript로 클라이언트 측 이미지 크기 조정이 가능합니까?

업로드하기 전에 JavaScript를 사용하여 클라이언트 측 이미지 크기 조정

클라이언트 측에서 이미지 크기를 조정하면 서버에 업로드하기 전에 여러 가지 이점이 있습니다. 서버 부하를 줄이고 페이지 렌더링 속도를 높이며 더 나은 사용자 경험을 제공합니다.

클라이언트 측 JavaScript 이미지 크기 조정이 가능합니까?

예, 가능합니다. JavaScript를 사용하여 클라이언트 측에서 이미지 크기를 조정합니다. Flash를 사용하지 않고도 크기를 조정할 수 있는 오픈 소스 알고리즘이 있습니다.

클라이언트측 이미지 크기 조정을 위한 알고리즘

GitHub에서 이러한 알고리즘 중 하나를 사용할 수 있습니다: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. 여기에는 모든 웹 애플리케이션에 삽입할 수 있는 ES6 및 바닐라 JavaScript 버전이 모두 포함되어 있습니다.

사용 예

알고리즘을 사용하려면:

1. 제공된 JavaScript 코드를 웹 페이지에 삽입하세요.
2. 파일 선택을 위한 입력을 정의하고 크기가 조정된 이미지를 표시하기 위한 이미지 태그를 지정합니다.
3. 입력에 대한 onchange 이벤트 리스너에서, 알고리즘에서 제공하는 크기 조정 기능을 호출합니다. 원하는 크기와 콜백 함수를 지정합니다.
4. 콜백 함수는 크기가 조정된 blob과 크기 조정 성공 여부를 나타내는 플래그를 수신합니다.
5. 반환된 blob을 사용하여 blob의 src 속성을 설정합니다. 크기가 조정된 이미지를 미리보기 위한 이미지 태그.

기능

• ES6 및 바닐라 JavaScript를 모두 지원합니다.
• 브라우저 기능을 자동으로 감지합니다. 최적의 호환성을 위해 폴리필을 적용합니다.
• 무결성을 유지하기 위해 애니메이션 GIF 이미지를 무시합니다.

위 내용은 JavaScript로 클라이언트 측 이미지 크기 조정이 가능합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!