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

代码语言：html

所属分类：其他

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Mini Photoshop - 教学演示版</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 12px; color: #d4d4d4; background: #1e1e1e; user-select: none; }

  #app { display: flex; flex-direction: column; height: 100vh; }

  /* ========== 顶部菜单 ========== */
  #topbar {
    height: 32px; background: #2b2b2b; border-bottom: 1px solid #1a1a1a;
    display: flex; align-items: center; padding: 0 8px; gap: 4px;
  }
  .menu { padding: 4px 10px; cursor: pointer; border-radius: 3px; }
  .menu:hover { background: #3a3a3a; }
  .dropdown { position: relative; }
  .dropdown-content {
    display: none; position: absolute; top: 100%; left: 0;
    background: #2b2b2b; border: 1px solid #1a1a1a; min-width: 180px; z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }
  .dropdown-content .item { padding: 6px 14px; cursor: pointer; }
  .dropdown-content .item:hover { background: #3a78d8; color: #fff; }
  .dropdown-content .item.disabled { color: #666; pointer-events: none; }
  .dropdown:hover .dropdown-content { display: block; }

  /* ========== 主体 ========== */
  #main { flex: 1; display: flex; overflow: hidden; }

  /* ========== 左侧工具栏 ========== */
  #toolbar {
    width: 52px; background: #2b2b2b; border-right: 1px solid #1a1a1a;
    display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px;
  }
  .tool {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 4px; position: relative;
  }
  .tool:hover { background: #3a3a3a; }
  .tool.active { background: #3a78d8; color: #fff; }
  .tool svg { width: 22px; height: 22px; pointer-events: none; }
  .tool::after {
    content: attr(data-tip); position: absolute; left: 105%; top: 50%; transform: translateY(-50%);
    background: #000; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 11px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; z-index: 1000;
  }
  .tool:hover::after { opacity: 1; }

  /* ========== 中央画布 ========== */
  #canvas-area {
    flex: 1; background: #1e1e1e; overflow: auto; position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  #canvas-wrap {
    position: relative; box-shadow: 0 0 30px rgba(0,0,0,.6);
  }
  #main-canvas, #overlay-canvas { display: block; position: absolute; top: 0; left: 0; }
  #main-canvas { background: #fff; }
  #overlay-canvas { pointer-events: none; }

  /* ========== 右侧面板 ========== */
  #sidebar {
    width: 260px; background: #2b2b2b; border-left: 1px solid #1a1a1a;
    display: flex; flex-direction: column;
  }
  .panel { border-bottom: 1px solid #1a1a1a; }
  .panel-header {
    padding: 6px 10px; background: #252525; cursor: pointer; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
  }
  .panel-header::before { content: "▾"; margin-right: 6px; font-size: 10px; }
  .panel.collapsed .panel-header::before { content: "▸"; }
  .panel.collapsed .panel-body { display: none; }
  .panel-body { padding: 8px 10px; }

  /* 图层列表 */
  .layers-list { max-height: 240px; overflow-y: auto; }
  .layer-item {
    display: flex; align-items: center; padding: 4px 6px; gap: 6px;
    border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  }
  .layer-item:hover { background: #353535; }
  .layer-item.active { border-color: #3a78d8; background: #2a4068; }
  .layer-thumb {
    width: 36px; height: 28px; background: #555 center/contain no-repeat;
    border: 1px solid #555; flex-shrink: 0;
  }
  .layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .layer-vis, .layer-lock {
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: .6; font-size: 12px;
  }
  .layer-vis:hover, .layer-lock:hover { opacity: 1; }
  .layer-vis.off { color: #888; }
  .layer-actions { display: flex; gap: 4px; margin-top: 6px; }
  .layer-actions button {
    flex: 1; padding: 4px; background: #3a3a3a; border: 1px solid #1a1a1a; color: #d4d4d4;
    border-radius: 3px; cursor: pointer; font-size: 11px;
  }
  .layer-actions button:hover { background: #4a4a4a; }

  /* 属性行 */
  .row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .row label { width: 56px; color: #aaa; flex-shrink: 0; }
  .row input[type="range"] { flex: 1; }
  .row input[type="number"], .row input[type="text"], .row select {
    flex: 1; background: #1a1a1a; border: 1px solid #444; color: #d4d4d4;
    padding: 2px 4px; border-radius: 3px; min-width: 0;
  }
  .row input[type="color"] { width: 30px; height: 22px; background: none; border: 1px solid #444; padding: 0; }

  /* 滤镜按钮 */
  .filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .filter-grid button {
    padding: 6px; background: #3a3a3a; border: 1px solid #1a1a1a; color: #d4d4d4;
    border-radius: 3px; cursor: pointer; font-size: 11px;
  }
  .filter-grid button:hover { background: #4a4a4a; }

  /* 曲线 */
  .curve-area { position: relative; background: #1a1a1a; border: 1px solid #444; }
  #curve-canvas { display: block; width: 100%; cursor: crosshair; }
  .curve-channels { display: flex; gap: 4px; margin-top: 6px; }
  .curve-channels button {
    flex: 1; padding: 4px; background: #3a3a3a; border: 1px solid #1a1a1a; color: #d4d4d4;
    border-radius: 3px; cursor: pointer; font-size: 11px;
  }
  .curve-channels button.active { background: #3a78d8; color: #fff; }

  /* 底部状态栏 */
  #statusbar {
    height: 24px; background: #2b2b2b; border-top: 1px solid #1a1a1a;
    display: flex; align-items: center; padding: 0 10px; gap: 14px; font-size: 11px; color: #aaa;
  }

  /* 模态框 */
  .modal-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
    align-items: center; justify-content: center; z-index: 2000;
  }
  .modal {
    background: #2b2b2b; border: 1px solid #1a1a1a; border-radius: 6px; padding: 16px;
    min-width: 280px; box-shadow: 0 8px 30px rgba(0,0,0,.7);
  }
  .modal h3 { margin-bottom: 10px; }
  .modal .row label { width: 70.........完整代码请登录后点击上方下载按钮下载查看