0UT1S's

const imageLoader = document.getElementById('imageLoader');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');
let img = new Image();

// Function to sanitize user input
function sanitizeInput(input) {
    return input.replace(/[^\w\s-]/gi, ''); // Remove special characters except spaces and hyphens
}

// Function to validate file type
function isValidImageFile(file) {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    return allowedTypes.includes(file.type);
}

// Function to validate numeric inputs
function isValidNumber(value, min, max) {
    return !isNaN(value) && value >= min && value <= max;
}

// Load and display the image
imageLoader.addEventListener('change', (e) => {
    const file = e.target.files[0];

if (!file || !isValidImageFile(file)) {
        alert('無効なファイル形式です。JPEG、PNG、またはGIF画像を選択してください。');
        return;
    }

// Apply watermark to the image
function applyWatermark() {
    if (!img.src) {
        alert('画像をアップロードしてください。');
        return;
    }

const watermarkText = sanitizeInput(document.getElementById('watermarkText').value);
    const fontSize = parseInt(document.getElementById('fontSize').value, 10);
    const fontColor = document.getElementById('fontColor').value;
    const textAngle = parseInt(document.getElementById('textAngle').value, 10);
    const position = document.getElementById('positionSelect').value;
    const fontSelect = sanitizeInput(document.getElementById('fontSelect').value);

// Validate inputs
    if (!watermarkText || !isValidNumber(fontSize, 10, 100) || !isValidNumber(textAngle, 0, 360)) {
        alert('無効な入力値です。フォントサイズは10～100、角度は0～360の範囲で指定してください。');
        return;
    }

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
    ctx.drawImage(img, 0, 0);

ctx.font = `${fontSize}px ${fontSelect}`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = "center";

ctx.save();
    ctx.translate(imageCanvas.width / 2, imageCanvas.height / 2);
    ctx.rotate(textAngle * Math.PI / 180);

let xPos = 0, yPos = 0;
    switch(position) {
        case 'top-left':
            xPos = -imageCanvas.width / 2 + fontSize;
            yPos = -imageCanvas.height / 2 + fontSize;
            break;
        case 'top-center':
            xPos = 0;
            yPos = -imageCanvas.height / 2 + fontSize;
            break;
        case 'top-right':
            xPos = imageCanvas.width / 2 - fontSize;
            yPos = -imageCanvas.height / 2 + fontSize;
            break;
        case 'middle-left':
            xPos = -imageCanvas.width / 2 + fontSize;
            yPos = 0;
            break;
        case 'middle-center':
            xPos = 0;
            yPos = 0;
            break;
        case 'middle-right':
            xPos = imageCanvas.width / 2 - fontSize;
            yPos = 0;
            break;
        case 'bottom-left':
            xPos = -imageCanvas.width / 2 + fontSize;
            yPos = imageCanvas.height / 2 - fontSize;
            break;
        case 'bottom-center':
            xPos = 0;
            yPos = imageCanvas.height / 2 - fontSize;
            break;
        case 'bottom-right':
            xPos = imageCanvas.width / 2 - fontSize;
            yPos = imageCanvas.height / 2 - fontSize;
            break;
    }

ctx.fillText(watermarkText, xPos, yPos);
    ctx.restore();

// Generate downloadable image
    const image = imageCanvas.toDataURL("image/png");
    const downloadLink = document.getElementById('downloadLink');
    downloadLink.href = image;
    downloadLink.download = `watermarked-image-${Date.now()}.png`;
    downloadLink.style.display = 'block';
}

By Order of Mr.0UT1S