JavaScript로 업로드하기 전에 이미지 자르기

이 3분 자습서에서는 JavaScript 이미지 자르기 도구인 CropGuide를 사용하여 기존 파일 업로드 코드를 변경하지 않고 서버에 업로드하기 전에 이미지를 자릅니다.

파일 업로드 필드가 있는 양식이 이미 설정되어 있다고 가정합니다.

우리의 목표는 기존 코드를 수정하지 않고도 이 필드에 이미지 편집을 추가하는 것입니다.

사용자가 이미지 자르기를 돕는 이유는 무엇입니까?

이미지 업로드 속도를 높이려면. 이미지 크기가 작을수록 업로드 속도가 빨라지고 업로드 안정성이 향상되며 디스크 사용량이 줄어듭니다.

더 나은 사용자 생성 콘텐츠를 수신하기 위해. 몇 가지 안내를 통해 사용자는 이미지의 중요한 부분을 자를 수 있습니다.

이미지 업로드 마찰을 줄이기 위해. 최종 사용자는 디자이너가 아닙니다. 이미지가 원하는 종횡비가 아니거나 최대 파일 크기보다 큰 경우 이를 수정하는 방법을 항상 알 수는 없습니다.

업로드하기 전에 이미지를 최적화하면 더 나은 이미지를 얻을 수 있을 뿐만 아니라 좌절감으로 양식을 종료하는 사용자가 줄어들기 때문에 더 많은 이미지를 얻을 수 있습니다.

CropGuide를 사용하여 이미지 자르기

이 자습서에서는 JavaScript 이미지 자르기 솔루션으로 CropGuide을 사용합니다.

CropGuide는 다음을 지원합니다.

자르기 종횡비 적용.

최소 이미지 크기가 필요합니다.

이미지 크기를 최대 크기로 자동 조정합니다.

이미지 압축 또는 이미지 형식 변환

이미지 방향 문제 수정.

설치에는 몇 분밖에 걸리지 않으며 두 단계가 필요합니다.

We create a CropGuide account

웹 페이지

에 CropGuide<script>를 추가합니다.

완료!

이제 CropGuide는 각 파일 업로드를 자동으로 가로채고 사용자에게 이미지 편집기를 제공합니다. CropGuide 대시보드에서 이미지 요구 사항을 설정할 수 있습니다.

중요: 이미지는 CropGuide에 업로드되지 않으며 브라우저에서 이미지 편집이 이루어지므로 개인 정보 보호 및 성능에 좋습니다.

이것이 우리 코드의 모습입니다.

<!-- The existing file input somewhere in our form -->
<input type="file" />

<!-- The script tag we just added to our page -->
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>

Try out the image editor here

CropGuide는 기본 파일 입력 요소와 함께 작동하지만 고급 JavaScript 파일 업로드 라이브러리에서도 잘 작동합니다.

마무리

웹 페이지에 단일 스크립트 태그를 삽입하여 웹 사이트에 이미지 자르기를 추가했습니다. 서버 로직을 편집하거나 JavaScript를 조정할 필요가 없어 많은 시간을 절약할 수 있었습니다.

이제 사용자가 이미지를 더 쉽게 업로드할 수 있으므로 더 높은 품질의 이미지와 더 많은 이미지가 업로드됩니다. 서버에서 이미지 문제를 수정하고 사용자가 이미지를 준비하는 데 도움을 주어 시간을 절약합니다.