Canvas 이미지 드롭 후 드롭 이미지 정보 출력

Canvas 이미지 드롭 후 드롭 이미지 정보 출력

예제
이미지 파일을 캔버스에 드롭하세요

Tag And Script

<style>
#canvas_ex { border: 2px dashed #ccc; }
#canvas_ex.hover { border-color: #333; background-color: #f0f0f0; }
.canvas_ex_history{position: relative; clear: both; width:100%; margin:5px 0; padding:5px; font-size: 1.12em; display: none; }
.canvas_ex_history.active{display: inline-block;}
.canvas_ex_history.active img{width:40px; min-height: 30px; margin-right: 5px;}
.canvas_ex_history.active strong {color:red;}
.canvas_ex_history.active .space1 {clear: both;width: 100%;height: 1px;}
.canvas_ex_history.active .space1.gray {background:#ccc;}
.canvas_ex_history.active .space5 {clear: both;width: 100%;height: 5px;}
</style>

<h3>이미지 파일을 캔버스에 드롭하세요</h3>
<div class="canvas_ex_history"></div>
<canvas id="canvas_ex" width="1200" height="300" class="canvas_ex"></canvas>

<script>
$(function(e) {
	var canvas = document.getElementById('canvas_ex');
	var ctx = canvas.getContext('2d');
	var $canvas = $('#canvas_ex');
	var $canvas_ex_history = $('.canvas_ex_history'), ex_history_cnt = 0; ex_history_tag  = '';
	var new_w = 200, new_h = 200;

	// 1. 드래그 오버 (드롭 허용)
	$canvas.on('dragover', function(e) {
		e.preventDefault(); // 브라우저 기본 동작 방지
		e.stopPropagation();
		$(this).addClass('hover'); // 시각적 효과
	});

	// 2. 드래그 리브 (효과 제거)
	$canvas.on('dragleave', function(e) {
		e.preventDefault();
		e.stopPropagation();
		$(this).removeClass('hover');
	});

	// 3. 드롭 이벤트 처리
	$canvas.on('drop', function(e) {
		e.preventDefault();
		e.stopPropagation();
		$(this).removeClass('hover');

		// 드롭된 파일 가져오기
		var files = e.originalEvent.dataTransfer.files;
		if (files.length > 0) {
			handleFile(e, files[0]);
		}
	});

	// 타임스탬프 값을 년월일로 변환
	function fileTimestamp(t){
		var date = new Date(t);
		var year = date.getFullYear();
		var month = "0" + (date.getMonth()+1);
		var day = "0" + date.getDate();
		var hour = "0" + date.getHours();
		var minute = "0" + date.getMinutes();
		var second = "0" + date.getSeconds();
		return year + "-" + month.substr(-2) + "-" + day.substr(-2) + " " + hour.substr(-2) + ":" + minute.substr(-2) + ":" + second.substr(-2);
	}

	// 파일 읽기 및 캔버스에 그리기
	function handleFile(e, file) {
		if (!file.type.match('image.*')) {
			alert('이미지 파일만 가능합니다.');
			return;
		}
		file['ext'] = file.name.split('.').pop().toLowerCase();
		file['width'] = 0;
		file['height'] = 0;
		file['filetime'] = fileTimestamp(file.lastModified);// 타임스탬프 값을 년월일로 변환
		file['x'] = e.offsetX;
		file['y'] = e.offsetY;

		//console.log(e);

		var reader = new FileReader();
		reader.onload = function(event) {
			var img = new Image();
			img.onload = function() {
				// 캔버스 크기 조정 (선택사항)
				// canvas.width = img.width;
				// canvas.height = img.height;
				// 이미지 그리기

				file['width'] = img.width;
				file['height'] = img.height;
				file['width_ratio'] = Math.ceil( (img.width / img.height) * new_h ); // 이미지 비율
				file['height_ratio'] = Math.ceil( (img.height / img.width) * new_w ); // 이미지 비율

				// 캔버스 중앙 계산
				var canvas_x = (canvas.width - file['width_ratio']) / 2;
				var canvas_y = (canvas.height - file['height_ratio']) / 2;

				//ctx.drawImage(img, 0, 0, img.width, img.height); // 원보 그대로
				ctx.drawImage(img, file['x'], file['y'], file['width_ratio'], file['height_ratio']); // 비율에 맞게 이미지 적용후
				console.log(file);

				ex_history_cnt++;

				var ex_history_tag = $canvas_ex_history.html();

				ex_history_tag += $canvas_ex_history.html() ? '<div class="space5"></div><div class="space1 gray"></div><div class="space5"></div>' : '';
				ex_history_tag += '<img src="'+event.target.result+'" alt="" />';

				ex_history_tag += ex_history_cnt+' ) ';
				ex_history_tag += 'x : <strong>'+file['x']+'</strong>';
				ex_history_tag += ' , y : <strong>'+file['y']+'</strong>';
				ex_history_tag += ' , 파일명 : <strong>'+file['name']+'</strong>';
				ex_history_tag += ' , 확장자 : <strong>'+file['ext']+'</strong>';
				ex_history_tag += ' , 용량 : <strong>'+file['size'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'Byte</strong>';
				ex_history_tag += ' , 크기 : <strong>'+file['width']+'</strong> X <strong>'+file['height']+'</strong>';
				ex_history_tag += ' , 날짜 : <strong>'+file['filetime']+'</strong>';

				$canvas_ex_history.addClass('active');
				$canvas_ex_history.html(ex_history_tag);

			}
			img.src = event.target.result;
		}
		reader.readAsDataURL(file);
	}
});
</script>