플래시 없이 JavaScript를 사용하여 클라이언트 측에서 이미지 크기를 어떻게 조정할 수 있습니까?

JavaScript를 사용하여 클라이언트 측에서 이미지 크기 조정: 오픈 소스 솔루션

오늘날의 웹 개발 환경에서는 이전에 클라이언트 측에서 이미지 크기를 조정하는 것이 바람직한 경우가 많습니다. 서버에 업로드합니다. 이 접근 방식을 사용하면 페이지 로드 시간을 단축하여 이미지 품질을 최적화하고 서버 로드를 줄이며 사용자 환경을 개선할 수 있습니다.

Flash는 이미지 크기 조정을 위한 일반적인 옵션이었지만 많은 개발자는 Flash 사용을 기피합니다. 다행히 JavaScript를 활용하여 이미지 크기를 효과적으로 조정하는 솔루션이 있습니다.

오픈 소스 이미지 크기 조정 알고리즘

GitHub(https://gist)에서 사용할 수 있는 오픈 소스 알고리즘 .github.com/dcollien/312bce1270a5f511bf4a)는 클라이언트 측에서 이미지 크기를 조정하는 안정적인 방법을 제공합니다. 스크립트 태그에 포함될 수 있는 ES6 버전과 .js 버전을 제공합니다.

구현

크기 조정 알고리즘을 구현하려면 다음 단계를 따르세요.

1. 아래와 같이 HTML 코드를 추가하세요.

<code class="HTML"><input type="file" id="select">
<img id="preview"></code>

2. 아래 JavaScript 코드를 추가하세요.

<code class="JavaScript">document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};</code>

기능 및 지원

알고리즘은 다음을 포함한 다양한 기능과 지원을 자랑합니다.

• 지정된 최대 너비 및 높이를 기준으로 크기 조정
• 지원 감지 및 브라우저 간 호환성을 위한 폴리필
• 효율성을 위해 애니메이션 GIF 제외

위 내용은 플래시 없이 JavaScript를 사용하여 클라이언트 측에서 이미지 크기를 어떻게 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!