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>PhotoForge — 图像编辑器</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0e0e10;--panel:#18181b;--surface:#232328;--surface-h:#2c2c32;--surface-a:#35353d;
  --border:#333340;--border-l:#44444f;
  --text:#e4e4e8;--text2:#a0a0ab;--text3:#62626b;
  --accent:#4a9eff;--accent-h:#6db5ff;--accent-d:rgba(74,158,255,.12);
  --red:#ff4a5e;--green:#3ddc84;--yellow:#ffb84d;--purple:#b388ff;
  --mono:'JetBrains Mono',monospace;--sans:'Noto Sans SC',system-ui,sans-serif;
  --rh:28px;
}
html,body{height:100%;overflow:hidden;font-family:var(--sans);background:var(--bg);color:var(--text);font-size:13px}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-l)}

/* ===== LAYOUT ===== */
#app{display:flex;flex-direction:column;height:100vh}
.menu-bar{height:var(--rh);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 4px;gap:1px;z-index:200;user-select:none;-webkit-user-select:none}
.main-area{flex:1;display:flex;overflow:hidden}
.status-bar{height:24px;background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:12px;font-family:var(--mono);font-size:11px;color:var(--text3);user-select:none}

/* ===== MENU ===== */
.menu-item{position:relative}
.menu-item>span{padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .12s}
.menu-item>span:hover,.menu-item.open>span{background:var(--surface);color:var(--text)}
.menu-dropdown{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px;z-index:300;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.menu-item.open .menu-dropdown{display:block}
.menu-opt{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .1s;white-space:nowrap}
.menu-opt:hover{background:var(--accent-d);color:var(--accent)}
.menu-opt kbd{font-family:var(--mono);font-size:10px;color:var(--text3);margin-left:24px}
.menu-opt.disabled{opacity:.35;pointer-events:none}
.menu-divider{height:1px;background:var(--border);margin:4px 8px}

/* ===== TOOLBAR ===== */
.toolbar{width:46px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px}
.tool-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text3);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;letter-spacing:.02em}
.tool-btn:hover{background:var(--surface);color:var(--text)}
.tool-btn.active{background:var(--accent-d);border-color:var(--accent);color:var(--accent)}
.tool-sep{width:24px;height:1px;background:var(--border);margin:6px 0}

/* ===== CANVAS AREA ===== */
.canvas-area{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.canvas-area::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--border) .5px,transparent 0);background-size:24px 24px;opacity:.3;pointer-events:none}
.canvas-wrap{position:relative;box-shadow:0 4px 40px rgba(0,0,0,.6);border-radius:2px;overflow:hidden}
.canvas-wrap canvas{display:block}
#overlayCanvas{position:absolute;top:0;left:0;cursor:crosshair}

/* ===== RIGHT PANEL ===== */
.right-panel{width:250px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.panel-section{padding:10px 12px;border-bottom:1px solid var(--border)}
.panel-title{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}

/* Props */
.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prop-row label{font-family:var(--mono);font-size:11px;color:var(--text3);min-width:50px}
.prop-row input[type=range]{flex:1;accent-color:var(--accent);height:4px}
.prop-row .val{font-family:var(--mono);font-size:11px;color:var(--text2);min-width:36px;text-align:right}
.prop-row input[type=color]{width:32px;height:24px;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer;padding:0}
.prop-row input[type=number]{width:60px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:3px 6px;font-family:var(--mono);font-size:11px;outline:none}
.prop-row input[type=number]:focus{border-color:var(--accent)}

/* Layers */
.layers-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px}
.layer-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.layer-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .12s}
.layer-item:hover{background:var(--surface)}
.layer-item.active{background:var(--accent-d);border-color:rgba(74,158,255,.3)}
.layer-thumb{width:36px;height:28px;border:1px solid var(--border);border-radius:3px;background-image:repeating-conic-gradient(#2a2a2a 0% 25%,#222 0% 50%);background-size:8px 8px;flex-shrink:0;overflow:hidden}
.layer-thumb canvas.........完整代码请登录后点击上方下载按钮下载查看