Add watermark into a JPG

<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('uploadArea');
    const imageUpload = document.getElementById('imageUpload');
    const watermarkText = document.getElementById('watermarkText');
    const textColor = document.getElementById('textColor');
    const fontSize = document.getElementById('fontSize');
    const fontSizeValue = document.getElementById('fontSizeValue');
    const opacity = document.getElementById('opacity');
    const opacityValue = document.getElementById('opacityValue');
    const position = document.getElementById('position');
    const applyBtn = document.getElementById('applyWatermark');
    const downloadBtn = document.getElementById('downloadBtn');
    const canvas = document.getElementById('previewCanvas');
    const ctx = canvas.getContext('2d');

    let originalImage = null;

    // Update range values display
    fontSize.addEventListener('input', () => {
        fontSizeValue.textContent = `${fontSize.value}px`;
    });

    opacity.addEventListener('input', () => {
        opacityValue.textContent = `${Math.round(opacity.value * 100)}%`;
    });

    // Handle file upload
    uploadArea.addEventListener('click', () => imageUpload.click());
    
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#FF5400';
        uploadArea.style.background = 'rgba(255, 84, 0, 0.2)';
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.style.borderColor = '#FFA800';
        uploadArea.style.background = 'rgba(255, 168, 0, 0.1)';
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#FFA800';
        uploadArea.style.background = 'rgba(255, 168, 0, 0.1)';
        
        if (e.dataTransfer.files.length > 0) {
            handleImageUpload(e.dataTransfer.files[0]);
        }
    });

    imageUpload.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleImageUpload(e.target.files[0]);
        }
    });

    function handleImageUpload(file) {
        if (!file.type.startsWith('image/')) {
            alert('Please upload an image file (JPG/JPEG)');
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                originalImage = img;
                drawImage();
                downloadBtn.disabled = false;
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function drawImage() {
        if (!originalImage) return;

        // Set canvas size to match image (max 600px width for mobile)
        const maxWidth = Math.min(originalImage.width, 600);
        const scale = maxWidth / originalImage.width;
        canvas.width = maxWidth;
        canvas.height = originalImage.height * scale;

        // Draw original image
        ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
    }

    function applyWatermark() {
        if (!originalImage) {
            alert('Please upload an image first');
            return;
        }

        drawImage(); // Redraw original image first

        const text = watermarkText.value || 'Your Watermark';
        const color = textColor.value;
        const size = parseInt(fontSize.value);
        const alpha = parseFloat(opacity.value);
        const pos = position.value;

        ctx.globalAlpha = alpha;
        ctx.font = `bold ${size}px Arial`;
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        let x, y;
        const padding = 20;

        switch (pos) {
            case 'center':
                x = canvas.width / 2;
                y = canvas.height / 2;
                break;
            case 'top-left':
                x = padding + ctx.measureText(text).width / 2;
                y = padding + size / 2;
                break;
            case 'top-right':
                x = canvas.width - padding - ctx.measureText(text).width / 2;
                y = padding + size / 2;
                break;
            case 'bottom-left':
                x = padding + ctx.measureText(text).width / 2;
                y = canvas.height - padding - size / 2;
                break;
            case 'bottom-right':
                x = canvas.width - padding - ctx.measureText(text).width / 2;
                y = canvas.height - padding - size / 2;
                break;
        }

        // Add text shadow for better visibility
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
        ctx.shadowBlur = 3;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;

        ctx.fillText(text, x, y);

        // Reset shadow and alpha
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.globalAlpha = 1;
    }

    applyBtn.addEventListener('click', applyWatermark);

    downloadBtn.addEventListener('click', () => {
        if (!originalImage) return;

        const link = document.createElement('a');
        link.download = 'watermarked-image.jpg';
        link.href = canvas.toDataURL('image/jpeg', 0.9);
        link.click();
    });

    // Initialize with default values
    fontSizeValue.textContent = `${fontSize.value}px`;
    opacityValue.textContent = `${Math.round(opacity.value * 100)}%`;
});
</script>