js+css实现在线ps图片编辑修改代码
代码语言：html
所属分类：其他
代码描述：做个在线图片编辑ps工具网页
代码标签： js+css实现在线 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>WebJS Photoshop - 网页版图像编辑器</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* 隐藏滚动条但保留功能 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* 棋盘格背景（表示透明通道） */
.checkerboard {
background-color: #1e1e1e;
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;
}
/* 限制曲线图控制点拖拽区域 */
#curves-pad { touch-action: none; }
</style>
</head>
<body class="bg-gray-950 text-gray-100 h-screen flex flex-col overflow-hidden select-none font-sans">
<!-- 顶栏：文件与基本操作 -->
<header class="bg-gray-900 border-b border-gray-800 px-4 py-2 flex items-center justify-between z-10">
<div class="flex items-center space-x-4">
<span class="text-blue-500 font-bold text-xl flex items-center gap-1">
<i data-lucide="layers"></i> WebJS PS
</span>
<div class="h-6 w-px bg-gray-800"></div>
<!-- 文件导入 -->
<label class="bg-gray-800 hover:bg-gray-700 px-3 py-1.5 rounded text-sm cursor-pointer flex items-center gap-1.5 transition">
<i data-lucide="upload" class="w-4 h-4"></i> 导入图片
<input type="file" id="file-upload" class="hidden" accept="image/*">
</label>
<!-- 导出 -->
<button id="btn-export" class="bg-blue-600 hover:bg-blue-500 px-3 py-1.5 rounded text-sm flex items-center gap-1.5 transition">
<i data-lucide="download" class="w-4 h-4"></i> 导出 PNG
</button>
</div>
<!-- 撤销/重做 & 缩放控制 -->
<div class="flex items-center space-x-3">
<button id="btn-undo" class="p-1.5 bg-gray-800 hover:bg-gray-700 rounded disabled:opacity-50" title="撤销">
<i data-lucide="undo-2" class="w-4 h-4"></i>
</button>
<button id="btn-redo" class="p-1.5 bg-gray-800 hover:bg-gray-700 rounded disabled:opacity-50" title="重做">
<i data-lucide="redo-2" class="w-4 h-4"></i>
</button>
<div class="h-6 w-px bg-gray-800"></div>
<!-- 视图缩放 -->
<button id="btn-zoom-out" class="p-1.5 bg-gray-800 hover:bg-gray-700 rounded"><i data-lucide="zoom-out" class="w-4 h-4"></i></button>
<span id="zoom-level" class="text-sm w-12 text-center">100%</span>
<button id="btn-zoom-in" class="p-1.5 bg-gray-800 hover:bg-gray-700 rounded"><i data-lucide="zoom-in" class="w-4 h-4"></i></button>
</div>
</header>
<!-- 工具属性栏（动态变化） -->
<div class="bg-gray-900/50 border-b border-gray-800 px-4 py-2 flex items-center space-x-6 text-sm">
<!-- 基础画笔/橡皮擦 属性 -->
<div id="prop-brush" class="flex items-center space-x-4">
<span class="text-gray-400">画笔大小:</span>
<input type="range" id="brush-size" min="1" max="100" value="10" class="w-32 accent-blue-500">
<span id="brush-size-val">10px</span>
<span class="text-gray-400 ml-4">颜色:</span>
<input type="color" id="brush-color" value="#3b82f6" class="w-8 h-8 rounded border-none bg-transparent cursor-pointer">
<span class="text-gray-400 ml-4">不透明度:</span>
<input type="range" id="brush-opacity" min="1" max="100" value="100" class="w-24 accent-blue-500">
<span id="brush-opacity-val">100%</span>
</div>
</div>
<!-- 主体：左工具栏 + 中画布 + 右控制面板 -->
<div class="flex-1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0