js实现类似dooo0t图片拼贴打孔工具代码-html代码-BFW代码库

js实现类似dooo0t图片拼贴打孔工具代码

代码语言：html

所属分类：其他

代码由gemini-3.5-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：类似「dooo0t」的图片拼贴打孔工具

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dooo0t-Like 图片拼贴打孔器</title>
    <!-- 引入 Tailwind CSS 构建精致界面 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');
        
        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #faf7f2;
            color: #2d221e;
        }

        /* 自定义输入框和滑块样式 */
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #e6dfd5;
            border-radius: 3px;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #e76f51;
            cursor: pointer;
            transition: transform 0.1s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        /* 胶卷式斑驳纸张质感 */
        .canvas-container {
            box-shadow: 0 20px 40px rgba(45, 34, 30, 0.12);
            border: 12px solid #ffffff;
            border-radius: 4px;
            position: relative;
        }
    </style>
</head>
<body class="min-h-screen py-8 px-4 md:px-8">

    <div class="max-w-6xl mx-auto">
        <!-- 头部设计 -->
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold tracking-tight text-[#e76f51] mb-2">DOOO0T COLLAGE</h1>
            <p class="text-sm text-[#8c7a6b]">给照片打孔，让生活透光 ✿ / 拼贴视觉实验小工具</p>
        </header>

        <!-- 主内容区 -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- 左侧：画布预览 -->
            <div class="lg:col-span-7 flex flex-col items-center">
                <div class="canvas-container bg-[#fcfaf7] overflow-hidden cursor-crosshair mb-4">
                    <canvas id="mainCanvas" width="800" height="800" class="max-w-full h-auto block"></canvas>
                </div>
                <p class="text-xs text-center text-[#8c7a6b]">
                    💡 提示：你可以直接在画布上<span class="font-semibold text-[#e76f51]">点击或拖拽涂抹</span>来进行手动定制打孔！
                </p>
            </div>

            <!-- 右侧：控制面板 -->
            <div class="lg:col-span-5 bg-white rounded-2xl p-6 shadow-sm border border-[#ede7df] space-y-6">
                
                <!-- 1. 图片上传 -->
                <div class="space-y-3">
                    <h3 class="font-bold text-sm tracking-wider uppercase text-[#8c7a6b] border-b border-[#ede7df] pb-2">1. 导入素材</h3>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-semibold text-[#5c4a3c] mb-1">主图 (Foreground)</label>
                            <label class="flex flex-col items-center justify-center h-20 border-2 border-das.........完整代码请登录后点击上方下载按钮下载查看