<!DOCTYPE html>
<html>
<head>
    <title>Rust WASM Image Processor</title>
    <style>
        .container { display: flex; gap: 20px; }
        .image-box { border: 1px solid #ccc; padding: 10px; }
        img { max-width: 600px; max-height: 400px; }
    </style>
</head>
<body>
<h1>Rust WASM Image Processor</h1>

<div>
    <input type="text" id="imageUrl"
           placeholder="输入图片URL (支持 JPEG/PNG)"
           style="width: 400px; margin-right: 10px;">
    <input type="checkbox" id="isGrayscale"> 是否灰度图
    <input type="checkbox" id="isInvert"> 是否反转
    <input type="checkbox" id="isSepia"> 是否复古（棕褐色）效果

    <button onclick="processImage()">处理图片</button>
</div>

<div class="container" style="margin-top: 20px;">
    <div class="image-box">
        <h3>原始图片</h3>
        <img id="original" crossorigin="anonymous" alt="original">
    </div>
    <div class="image-box">
        <h3>处理结果 (灰度图)</h3>
        <img id="processed">
    </div>
</div>

<script>
    const worker = new Worker('worker.js', {
        type: 'module'
    });
    const originalImg = document.getElementById('original');
    const processedImg = document.getElementById('processed');
    const urlInput = document.getElementById('imageUrl');
    const isGrayscale = document.getElementById('isGrayscale');
    const isInvert = document.getElementById('isInvert');
    const isSepia = document.getElementById('isSepia');


    // 实时预览原始图片
    urlInput.addEventListener('change', function() {
        console.log(this.value)
        originalImg.src = this.value;
    });

    async function processImage() {
        const url = urlInput.value;
        if (!url) return alert('请输入图片URL');

        worker.postMessage({
            type: 'process_image',
            url: url,
            options: {
                grayscale: isGrayscale.checked,
                invert: isInvert.checked,
                sepia: isSepia.checked
            }
        });
    }

    // 处理结果回调
    worker.onmessage = (e) => {
        if (e.data.type === 'processed_image') {
            const blob = new Blob([e.data.buffer], { type: e.data.mime });
            processedImg.src = URL.createObjectURL(blob);
        } else if (e.data.type === 'error') {
            alert('处理失败: ' + e.data.message);
        }
    };

    // 示例图片
    urlInput.value = 'http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280';
    console.log(urlInput.value)
    urlInput.dispatchEvent(new Event('change'));
</script>
</body>
</html>