Canvas Watermark 텍스트

Canvas Watermark 텍스트

예제
Add Watermark

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{float: right;}
</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>
	</div>
	<div id="output_container"></div>
</div>

<script>
function addWatermarkToText() {
	var imgElement = document.getElementById('target_image_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() ); 

	// 진행하기 전에 두 이미지가 모두 로드되었는지 확인 (특히 동적으로 로드되는 경우)
	if (!imgElement.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);

	// 워터마크 모양 사용자 지정
	ctx.font = '30px Arial';
	ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 글자색 및 불투명도
	ctx.textAlign = 'center'; // 텍스트 정렬 : start(디폴트)|end|center|left|right
	ctx.textBaseline = 'middle'; // 상하정렬 : alphabetic(디폴트)|top|hanging|middle|ideographic|bottom

	var watermarkText = '@워터마크 Cginjs.com';
	var x = canvas.width / 2;
	var y = canvas.height / 2;

	// 선택 사항: 대각선 효과를 위해 워터마크를 회전할 수 있슴
	ctx.save(); // 현재 캔버스 상태를 저장

	//ctx.translate(x, y); // 원점을 중심으로 이동
	ctx.translate(x - 200, 100);

	// 텍스트 그리기
	ctx.fillText(watermarkText, 0, 0);

	ctx.restore(); // 캔버스의 원래 상태를 복원

	// 선택 사항: 캔버스 전체에 워터마크를 반복 표시
	// 이는 더 복잡한 논리를 필요로 하지만 기본 원리는 동일

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

$(function(e) {
	$(document).on('click', '.watermark_ex_wrapper .watermark_ex_input_box .btn_add_watermark_ex', function(e){ 
		addWatermarkToText();
	});
});
</script>