jQuery를 활용한 이미지 사이즈(크기) 조절

리열·2023년 3월 15일
1

프로젝트 중 첨부한 이미지의 사이즈를 체크해달라는 요구가 있었습니다.
크기(용량) 체크는 해봤는데 사이즈는 익숙치 않았습니다.
열심히 구글링하고 수정해서 프로젝트에 적용되도록 했던 소스입니다.

$(function(){
	$('#uploadFile').on("change",function() {
    	let uploadFile = $('#uploadFile')[0];
        let files = uploadFile.files;
        fn_imageSizeChechk(files, 600, 900);
	})
})


function fn_imageSizeChechk(files, width, height){
	let _URL = window.URL || window.webkitURL;
	let img =newImage();

	img.src = _URL.createObjectURL(new Blob(files, {type: "application/jpg"}) );
	img.onload =function() {

		if(img.width != width || img.height != height) {
        	alert("이미지 사이즈는 " + width + " * " + height + " px로 등록해주세요.");
		return false;
    	}
	}
}

아래는 구글링하면 주로 나오는 소스입니다.

    var img = new Image();
    var file = obj.files[0];
    var _URL = window.URL || window.webkitURL;

    img.src = _URL.createObjectURL(file);

_URL.createObjectURL( ~~~)
이 부분에서 에러가 발생했습니다.
씨름한 결과 Blob 형태의 데이터가 와야했고 저는 제 소스에 적용되도록 위처럼 변경해서 원하는 결과를 얻을 수 있었습니다.

열심히 만들었는데..
이미지 사이즈 정해놓는게 불편하다고 결국 빠진 기능이기도 합니다 ㅎㅎ
그래도 다시 사용할 수 있을 것 같아 기록해봅니다.

profile
n년차 신입 개발자

0개의 댓글