Canvas Watermark 이미지

Canvas Watermark 이미지

예제
Add Watermark

Tag And Script

<style>
.btn_add_watermark_ex{margin:5px 0;}
img#watermark_image_source_ex{display: none;}
</style>

<img id="target_image_ex" src="/cma_img/cginjs_sample.png" alt="원본 이미지" />
<button class="btn btn_add_watermark_ex">Add Watermark</button>
<div id="output_container"></div>
<img id="watermark_image_source_ex" src="/data/common/logo_img" alt="워터마크 이미지" />

<script>
function addWatermarkToImage() {
	var imgElement = document.getElementById('target_image_ex');
	var watermarkElement = document.getElementById('watermark_image_source_ex');
	
	// 진행하기 전에 두 이미지가 모두 로드되었는지 확인 (특히 동적으로 로드되는 경우)
	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 = 0.5;

	// 워터마크 위치를 정의 (예: 여백을 두고 오른쪽 하단 모서리).
	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, x, 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에 추가
}

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