Canvas Watermark 이미지 X 좌표, Y 좌표, 회전각도, 투명도 컨트롤

Canvas Watermark 이미지 X 좌표, Y 좌표, 회전각도, 투명도 컨트롤

예제
Add Watermark X 좌표 : Y 좌표 : 회전각도 : 투명도 : 워터마크 이미지 size : x

Tag And Script

<style>
.watermark_ex_wrapper{position: relative; display: inline-block;padding:5px;text-align:center;}
.watermark_ex_wrapper .watermark_ex_input_box {position: relative; display: inline-block; float: left; width: 100%; padding:5px;}
.watermark_ex_wrapper .watermark_ex_input_box .btn_add_watermark_ex{display: none;}
.watermark_ex_wrapper .watermark_ex_input_box input[type='number'].frm_input{text-align:center; width:60px; margin-right:10px;}
.watermark_ex_wrapper .watermark_ex_input_box input[type='number'].frm_ex_watermark_x{}
.watermark_ex_wrapper .watermark_ex_input_box input[type='number'].frm_ex_watermark_y{}
.watermark_ex_wrapper .watermark_ex_input_box input[type='number'].frm_ex_watermark_height{ margin:0 10px;}
.watermark_ex_wrapper .watermark_ex_input_box input[type='number']:read-only{background: #f1f1f1;}
.watermark_ex_wrapper .watermark_ex_input_box .watermark_img_size_info{position: relative; float: right;}
.watermark_ex_wrapper img#watermark_image_source_ex{display: none;}
</style>

<div class="watermark_ex_wrapper">
	<img id="target_image_ex" src="/cma_img/cginjs_sample.png" alt="원본 이미지" />

	<div class="watermark_ex_input_box">
		<button class="btn btn_add_watermark_ex">Add Watermark</button>
		X 좌표 : <input type="number" value="0" class="frm_input frm_ex_watermark_x frm_ex_focus" min="0" placeholder="X 좌표" />
		Y 좌표 : <input type="number" value="0" class="frm_input frm_ex_watermark_y frm_ex_focus" min="0" placeholder="Y 좌표" />
		회전각도 : <input type="number" value="0" class="frm_input frm_ex_watermark_rotate frm_ex_focus" min="-360" max="360" placeholder="회전각도" />
		투명도 : <input type="number" value="0.5" class="frm_input frm_ex_watermark_alpha frm_ex_focus" frm_ex_focus" min="0.0" max="1.0" step="0.1" placeholder="투명도(Alpha)" />

		<span class="watermark_img_size_info">
			워터마크 이미지 size : 
			<input type="number" value="0" class="frm_input frm_ex_watermark_width no_action" readonly="readonly" placeholder="워터마크 이미지 width" />
			x
			<input type="number" value="0" class="frm_input frm_ex_watermark_height no_action" readonly="readonly" placeholder="Y 좌표" />
		</span>

	</div>

	<div id="output_container"></div>
	<img id="watermark_image_source_ex" src="/data/common/logo_img" alt="워터마크 이미지" />
</div>

<script>
function addWatermarkInputInit() {
	var imgElement = document.getElementById('target_image_ex');
	var watermarkElement = document.getElementById('watermark_image_source_ex');
	var $watermark_ex_input_box = $('.watermark_ex_wrapper .watermark_ex_input_box');

	var watermark_img_width = watermarkElement.naturalWidth;
	var watermark_img_height = watermarkElement.naturalHeight;

	var img_width = imgElement.naturalWidth;
	var img_height = imgElement.naturalHeight;

	var padding = 20;
	var watermarkWidth = 100;
	var watermarkHeight = img_height * (watermarkWidth / img_height);
	var x = img_width - watermarkWidth - padding;
	var y = img_height - watermarkHeight - padding;

	$watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_x').val(x);
	$watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_y').val(y);

	$watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_width').val(watermark_img_width);
	$watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_height').val(watermark_img_height);
}

function addWatermarkToImage() {
	var imgElement = document.getElementById('target_image_ex');
	var watermarkElement = document.getElementById('watermark_image_source_ex');
	var $watermark_ex_input_box = $('.watermark_ex_wrapper .watermark_ex_input_box');
	var canvas_x = parseInt( $watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_x').val() ); 
	var canvas_y = parseInt( $watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_y').val() ); 
	var canvas_rotate = parseInt( $watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_rotate').val() ); 
	var canvas_alpha = parseFloat( $watermark_ex_input_box.find('input[type="number"].frm_ex_watermark_alpha').val() ).toFixed(1); 

	// 진행하기 전에 두 이미지가 모두 로드되었는지 확인 (특히 동적으로 로드되는 경우)
	if (!imgElement.complete || !watermarkElement.complete) {
		console.error("이미지가 완전히 로드되지 않았습니다.");
		return;
	}

	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');

	// 캔버스 크기를 원본 이미지의 크기로 설정
	canvas.width = imgElement.naturalWidth;
	canvas.height = imgElement.naturalHeight;

	// 원본 이미지를 캔버스에 그리기
	ctx.drawImage(imgElement, 0, 0, canvas.width, canvas.height);

	// --- 워터마크 그리기 ---
	// 선택 사항: 투명도 조정(globalAlpha 값은 0~1 사이)
	ctx.globalAlpha = canvas_alpha;

	// 워터마크 회전
	var rotate_calc = ( (canvas_rotate * Math.PI) / 180 );
	ctx.rotate(rotate_calc); // 가도가 양수이면 시계반향 , 각도가 음수미염 반시계 방향으로 canvas_rotate만큼 좌표계를 기울임

	// 워터마크 위치를 정의 (예: 여백을 두고 오른쪽 하단 모서리).
	var padding = 20;
	var watermarkWidth = 100; // Adjust size as needed
	var watermarkHeight = watermarkElement.naturalHeight * (watermarkWidth / watermarkElement.naturalWidth);
	var x = canvas.width - watermarkWidth - padding;
	var y = canvas.height - watermarkHeight - padding;
	
	// 필요에 따라 크기를 조정
	ctx.drawImage(watermarkElement, canvas_x, canvas_y, watermarkWidth, watermarkHeight);

	// 선택 사항: 텍스트 워터마크를 대신 또는 추가로 추가할 수 있음.
	// ctx.globalAlpha = 0.7;
	// ctx.fillStyle = 'white';
	// ctx.font = '30px Arial';
	// ctx.fillText('My Brand Name', 50, 50);

	// --- 결과 출력 ---
	//캔버스를 이미지로 변환하여 표시하거나 다운로드
	var watermarkedImageUrl = canvas.toDataURL(); // 캔버스 콘텐츠를 데이터 URL로 변환
	var newImg = new Image();
	newImg.src = watermarkedImageUrl;
	$('#output_container').html(newImg); // 새 이미지를 DOM에 추가
}

addWatermarkInputInit();
$(function(e) {
	$(document).on('click', '.btn_add_watermark_ex', function(e){ 
		addWatermarkToImage();
	});

	$(document).on('change', '.watermark_ex_input_box input[type="number"].frm_input:not(.no_action)', function(e){ 
		addWatermarkToImage();
	});
});
</script>