在线照片排版印刷网站源码

于 2025-05-22 19:29:58 发布
阅读量247 收藏
点赞数 7
文章标签： 前端 css javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WUXIANJINBU/article/details/148147858
版权 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>证照通 - 在线证件照排版工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-4px);
                box-shadow: 0 10px 25px rgba(22, 93, 255, 0.12);
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-id-card text-primary text-2xl"></i>
                <span class="text-xl font-bold text-primary">证照通</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="#" class="text-dark hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-dark hover:text-primary transition-colors">尺寸指南</a>
                <a href="#" class="text-dark hover:text-primary transition-colors">使用教程</a>
                <a href="#" class="text-dark hover:text-primary transition-colors">常见问题</a>
            </div>
            <div class="flex items-center space-x-4">
                <button class="hidden md:block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    登录
                </button>
                <button class="md:hidden text-primary text-xl">
                    <i class="fa-solid fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="text-center mb-10 animate-fade-in">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">在线证件照排版工具</h1>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                简单几步，轻松完成证件照排版。支持多种尺寸、背景色调整，一键导出高质量PNG图片。
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧控制面板 -->
            <div class="lg:col-span-1 animate-slide-up" style="animation-delay: 0.1s">
                <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa-solid fa-sliders text-primary mr-2"></i>
                        排版设置
                    </h2>
                    
                    <div class="space-y-6">
                        <!-- 证件照尺寸选择 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">证件照尺寸</label>
                            <select id="photoSize" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all">
                                <option value="1">1寸 (2.5cm×3.5cm)</option>
                                <option value="2">2寸 (3.5cm×5.3cm)</option>
                                <option value="3">小一寸 (2.2cm×3.2cm)</option>
                                <option value="4">大一寸 (3.3cm×4.8cm)</option>
                                <option value="5">美国签证 (5.1cm×5.1cm)</option>
                                <option value="6">港澳通行证 (3.3cm×4.8cm)</option>
                                <option value="7">日本签证 (4.5cm×4.5cm)</option>
                            </select>
                        </div>
                        
                        <!-- 纸张尺寸选择 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">纸张尺寸</label>
                            <select id="paperSize" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all">
                                <option value="a4">A4 (210mm×297mm)</option>
                                <option value="4r">4R (102mm×152mm)</option>
                                <option value="5r">5R (127mm×178mm)</option>
                                <option value="6r">6R (152mm×203mm)</option>
                                <option value="8k">8K (260mm×370mm)</option>
                            </select>
                        </div>
                        
                        <!-- 背景色选择 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">背景颜色</label>
                            <div class="flex flex-wrap gap-3">
                                <button class="w-10 h-10 rounded-full bg-red-500 border-2 border-white shadow-sm hover:ring-2 hover:ring-red-500/50 transition-all" data-color="#FF3B30"></button>
                                <button class="w-10 h-10 rounded-full bg-blue-500 border-2 border-white shadow-sm hover:ring-2 hover:ring-blue-500/50 transition-all" data-color="#007AFF"></button>
                                <button class="w-10 h-10 rounded-full bg-gray-200 border-2 border-white shadow-sm hover:ring-2 hover:ring-gray-300/50 transition-all" data-color="#F5F5F5"></button>
                                <button class="w-10 h-10 rounded-full bg-green-500 border-2 border-white shadow-sm hover:ring-2 hover:ring-green-500/50 transition-all" data-color="#4CD964"></button>
                                <button class="w-10 h-10 rounded-full bg-yellow-500 border-2 border-white shadow-sm hover:ring-2 hover:ring-yellow-500/50 transition-all" data-color="#FFCC00"></button>
                                <button class="w-10 h-10 rounded-full border-2 border-gray-300 shadow-sm hover:ring-2 hover:ring-gray-400/50 transition-all" id="customColorBtn">
                                    <i class="fa-solid fa-plus text-xs"></i>
                                </button>
                            </div>
                            <input type="color" id="customColorPicker" class="hidden">
                        </div>
                        
                        <!-- 排版布局 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">排版布局</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center active-layout" data-layout="1">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-1 grid-rows-1 place-items-center">
                                        <div class="w-8 h-10 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">1张</span>
                                </button>
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center" data-layout="2">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-2 gap-1 place-items-center">
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">2张</span>
                                </button>
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center" data-layout="4">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-2 grid-rows-2 gap-1 place-items-center">
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-4 h-5 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">4张</span>
                                </button>
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center" data-layout="8">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-4 grid-rows-2 gap-1 place-items-center">
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-5 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">8张</span>
                                </button>
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center" data-layout="9">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-3 grid-rows-3 gap-1 place-items-center">
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">9张</span>
                                </button>
                                <button class="p-2 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all flex flex-col items-center" data-layout="12">
                                    <div class="w-full h-12 bg-gray-100 rounded-sm grid grid-cols-4 grid-rows-3 gap-1 place-items-center">
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                        <div class="w-2 h-3 bg-gray-300 rounded-sm"></div>
                                    </div>
                                    <span class="text-xs mt-1">12张</span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 上传照片 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">上传照片</label>
                            <div class="relative">
                                <input type="file" id="photoUpload" accept="image/*" class="hidden">
                                <button id="uploadBtn" class="w-full py-3 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                                    <i class="fa-solid fa-cloud-upload mr-2"></i>
                                    选择照片
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-2 text-center">支持 JPG、PNG 格式，建议尺寸不小于300×400像素</p>
                        </div>
                        
                        <!-- 生成预览 -->
                        <button id="generateBtn" class="w-full py-3 px-4 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fa-solid fa-magic mr-2"></i>
                            生成预览
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧预览区 -->
            <div class="lg:col-span-2 animate-slide-up" style="animation-delay: 0.2s">
                <div class="bg-white rounded-xl p-6 card-shadow h-full flex flex-col">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa-solid fa-eye text-primary mr-2"></i>
                        预览区域
                    </h2>
                    
                    <div class="flex-grow flex flex-col items-center justify-center relative">
                        <!-- 初始提示 -->
                        <div id="initialState" class="text-center py-10 animate-fade-in">
                            <div class="w-20 h-20 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                                <i class="fa-solid fa-image text-gray-300 text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-gray-500 mb-2">请上传照片并生成预览</h3>
                            <p class="text-sm text-gray-400 max-w-md mx-auto">上传照片后，您可以在此处预览排版效果，调整尺寸和布局直到满意为止</p>
                        </div>
                        
                        <!-- 加载状态 -->
                        <div id="loadingState" class="hidden text-center py-10">
                            <div class="w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin mx-auto mb-4"></div>
                            <h3 class="text-lg font-medium text-gray-500">正在处理...</h3>
                        </div>
                        
                        <!-- 预览区域 -->
                        <div id="previewContainer" class="hidden w-full max-w-lg mx-auto flex-grow flex flex-col items-center justify-center">
                            <div class="relative w-full aspect-[3/4] bg-gray-100 rounded-lg overflow-hidden shadow-md">
                                <canvas id="previewCanvas" class="w-full h-full"></canvas>
                                
                                <!-- 尺寸指示器 -->
                                <div class="absolute top-2 left-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
                                    <span id="dimensionIndicator">2.5cm × 3.5cm</span>
                                </div>
                                
                                <!-- 纸张尺寸指示器 -->
                                <div class="absolute top-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
                                    <span id="paperSizeIndicator">A4 (210mm×297mm)</span>
                                </div>
                                
                                <!-- 拖拽提示 -->
                                <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded opacity-70">
                                    <i class="fa-solid fa-arrows-alt mr-1"></i>可拖动调整位置
                                </div>
                            </div>
                            
                            <!-- 调整控制 -->
                            <div class="mt-6 flex space-x-4">
                                <button id="zoomInBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-search-plus"></i>
                                </button>
                                <button id="zoomOutBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-search-minus"></i>
                                </button>
                                <button id="rotateLeftBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-rotate-left"></i>
                                </button>
                                <button id="rotateRightBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-rotate-right"></i>
                                </button>
                                <button id="resetBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 下载区域 -->
                    <div id="downloadSection" class="mt-8 pt-6 border-t border-gray-100 hidden animate-fade-in">
                        <button id="downloadBtn" class="w-full py-3 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                            <i class="fa-solid fa-download mr-2"></i>
                            下载高质量PNG
                        </button>
                        <p class="text-xs text-gray-500 mt-2 text-center">下载的图片分辨率为300DPI，可直接用于打印</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 尺寸指南 -->
        <div class="mt-16 animate-slide-up" style="animation-delay: 0.3s">
            <h2 class="text-2xl font-bold mb-6 text-center">常见证件照尺寸指南</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                    <h3 class="text-lg font-bold mb-3 flex items-center">
                        <i class="fa-solid fa-id-card text-primary mr-2"></i>
                        身份证/学生证
                    </h3>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                            <div class="w-3/4 h-3/4 bg-gray-300 rounded-lg"></div>
                        </div>
                        <div class="flex flex-col justify-center">
                            <p class="text-sm text-gray-600 mb-2">尺寸：26mm × 32mm</p>
                            <p class="text-sm text-gray-600 mb-2">背景：白色</p>
                            <p class="text-sm text-gray-600">用途：身份证、学生证、工作证</p>
                        </div>
                    </div>
                    <button class="text-primary text-sm hover:underline transition-colors" onclick="selectSize(1)">
                        选择此尺寸 <i class="fa-solid fa-arrow-right ml-1"></i>
                    </button>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                    <h3 class="text-lg font-bold mb-3 flex items-center">
                        <i class="fa-solid fa-passport text-primary mr-2"></i>
                        护照/签证
                    </h3>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                            <div class="w-3/4 h-3/4 bg-gray-300 rounded-lg"></div>
                        </div>
                        <div class="flex flex-col justify-center">
                            <p class="text-sm text-gray-600 mb-2">尺寸：33mm × 48mm</p>
                            <p class="text-sm text-gray-600 mb-2">背景：白色/浅蓝色</p>
                            <p class="text-sm text-gray-600">用途：护照、港澳通行证、台湾通行证</p>
                        </div>
                    </div>
                    <button class="text-primary text-sm hover:underline transition-colors" onclick="selectSize(4)">
                        选择此尺寸 <i class="fa-solid fa-arrow-right ml-1"></i>
                    </button>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                    <h3 class="text-lg font-bold mb-3 flex items-center">
                        <i class="fa-solid fa-graduation-cap text-primary mr-2"></i>
                        毕业证/学位证
                    </h3>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                            <div class="w-3/4 h-3/4 bg-gray-300 rounded-lg"></div>
                        </div>
                        <div class="flex flex-col justify-center">
                            <p class="text-sm text-gray-600 mb-2">尺寸：35mm × 45mm</p>
                            <p class="text-sm text-gray-600 mb-2">背景：蓝色/红色</p>
                            <p class="text-sm text-gray-600">用途：毕业证、学位证、资格证书</p>
                        </div>
                    </div>
                    <button class="text-primary text-sm hover:underline transition-colors" onclick="selectSize(2)">
                        选择此尺寸 <i class="fa-solid fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </div>
            
            <!-- 纸张尺寸指南 -->
            <div class="mt-10 animate-slide-up" style="animation-delay: 0.4s">
                <h2 class="text-2xl font-bold mb-6 text-center">常见纸张尺寸指南</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                        <h3 class="text-lg font-bold mb-3 flex items-center">
                            <i class="fa-solid fa-file text-primary mr-2"></i>
                            A4 纸
                        </h3>
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div class="aspect-[210/297] bg-gray-100 rounded-lg flex items-center justify-center">
                                <div class="w-4/5 h-4/5 bg-gray-300 rounded-lg"></div>
                            </div>
                            <div class="flex flex-col justify-center">
                                <p class="text-sm text-gray-600 mb-2">尺寸：210mm × 297mm</p>
                                <p class="text-sm text-gray-600 mb-2">用途：最常用的打印纸</p>
                                <p class="text-sm text-gray-600">可排版多张证件照</p>
                            </div>
                        </div>
                        <button class="text-primary text-sm hover:underline transition-colors" onclick="selectPaperSize('a4')">
                            选择此尺寸 <i class="fa-solid fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                        <h3 class="text-lg font-bold mb-3 flex items-center">
                            <i class="fa-solid fa-camera text-primary mr-2"></i>
                            4R 照片纸
                        </h3>
                        <div class="grid grid-cols-2 gap-4 mb-4">

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄大新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值