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

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

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

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

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

구현

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

1. 아래 표시된 대로 HTML 코드를 추가합니다.

2. 아래 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.
    });
};

기능 및 지원

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

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