js+css实现在线ps图片编辑修改代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：做个在线图片编辑ps工具网页

下面为部分代码预览，完整代码请点击下载或在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>WebCraft - 在线图像编辑器</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
    :root {
        --bg-darkest: #1e1e1e;
        --bg-dark: #252526;
        --bg-medium: #2d2d2d;
        --bg-light: #3c3c3c;
        --bg-lighter: #4a4a4a;
        --text-main: #cccccc;
        --text-dim: #888888;
        --accent: #007acc;
        --accent-hover: #0098ff;
        --danger: #ff4757;
        --success: #2ed573;
        --border: #1e1e1e;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background: var(--bg-darkest);
        color: var(--text-main);
        overflow: hidden;
        height: 100vh;
        display: flex;
        flex-direction: column;
        user-select: none;
    }

    /* 顶部菜单栏 */
    header {
        background: var(--bg-medium);
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border-bottom: 1px solid var(--border);
        gap: 15px;
        z-index: 100;
    }
    .logo { font-weight: bold; font-size: 14px; color: var(--accent); margin-right: 20px; }
    .menu-item { font-size: 13px; padding: 5px 10px; border-radius: 4px; cursor: pointer; position: relative; }
    .menu-item:hover { background: var(--bg-light); }
    .menu-item input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

    /* 主工作区 */
    .workspace { display: flex; flex: 1; overflow: hidden; }

    /* 左侧工具栏 */
    .toolbar {
        width: 48px;
        background: var(--bg-dark);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 5px;
        gap: 2px;
    }
    .tool-btn {
        width: 40px; height: 40px;
        display: flex; justify-content: center; align-items: center;
        border-radius: 6px; cursor: pointer; color: var(--text-dim);
        border: 1px solid transparent; font-size: 16px;
        transition: all 0.1s;
    }
    .tool-btn:hover { color: var(--text-main); background: var(--bg-light); }
    .tool-btn.active { color: var(--accent); background: var(--bg-light); border-color: var(--accent); }

    /* 中心画布区 */
    .canvas-area {
        flex: 1;
        background: var(--bg-darkest);
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #main-canvas {
        background-image: 
            linear-gradient(45deg, #2a2a2a 25%, transparent 25%), 
            linear-gradient(-45deg, #2a2a2a 25%, transparent 25%), 
            linear-gradient(45deg, transparent 75%, #2a2a2a 75%), 
            linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        cursor: crosshair;
    }

    /* 右侧面板 */
    .panel {
        width: 280px;
        background: var(--bg-dark);
        border-left: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .panel-section {
        border-bottom: 1px solid var(--border);
        padding: 10px;
    }
    .panel-title {
        font-size: 11px; text-transform: uppercase; color: var(--text-dim);
        margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
    }
    .panel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
    .panel-row label { color: var(--text-dim); width: 60px; flex-shrink: 0; }
    .panel-row input[type="range"] { flex: 1; accent-color: var(--accent); }
    .panel-row input[type="number"] {
        width: 50px; background: var(--bg-light); border: 1px solid var(--border);
        color: var(--text-main); padding: 2px 4px; border-radius: 3px; font-size: 11px; text-align: center;
    }
    .panel-row input[type="color"] {
        width: 30px; height: 22px; border: 1px solid var(--border); background: none; cursor: pointer; padding: 0;
    }
    
    /* 按钮样式 */
    .btn {
        padding: 5px 10px; background: var(--accent); color: white; border: none;
        border-radius: 4px; cursor: pointer; font-size: 11px; font-w.........完整代码请登录后点击上方下载按钮下载查看