• Stars
    star
    348
  • Rank 121,840 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个高效快速的前端页面切图工具,用于将一张图片快速切割成切片并导出 HTML 文件,所有的工作都通过可视化拖拽完成,让你从重复的 PSD 切图工作中解放出来。

Puzzler

Puzzler 是一个高效快速的前端页面切图工具,用于将一张图片快速切割成切片并导出 HTML 文件, 所有的工作都通过可视化拖拽完成,让你从重复的 PSD 切图工作中解放出来。Puzzler 的愿景是拯救 ♥ 切图仔!

图片处理部分 Powered by image-clipper

EN

详细帮助文档、常见问题

puzzler

下载地址

发布 页面查看构建好的 Puzzler 的各个版本的二进制文件及更新日志。

主要功能特性

  • 支持拖拽导入图片,支持 jpg, png 等图片类型,也可直接导入 PSD 文件
  • 灵活的标尺和参考线操作,支持快速地移动拖放
  • 支持导出图像切片和 HTML 文件,导出之前还支持图像质量设置,自定义导出模板
  • 导出成功后可以一键预览、一键复制源代码
  • 操作记录自动恢复,以前切割过的图片可沿用历史记录继续操作
  • 支持创建图片热区,快速地拖放操作,并可设置热区的链接、是否新窗口打开和宽高信息
  • 全面地快捷键支持
  • 便利地用户设置,支持多种常用设置
  • 可创建自定义文字内容,文字内容支持 Markdown 格式

不知道怎么开始?那不妨看看 小明是怎么切图的

使用的开源项目

感谢 ♥ 以上作者的贡献。

License

本项目基于 MIT 协议发布

MIT: http://rem.mit-license.org, 详见 LICENSE 文件

More Repositories

1

paginationjs

A jQuery plugin to provide simple yet fully customisable pagination.
JavaScript
903
star
2

redux-saga-in-chinese

Redux-saga 中文文档
634
star
3

react-native-alipay

基于 React Native 实现的支付宝钱包 UI 界面
JavaScript
164
star
4

rock-markdown-editor

Cross-platform Markdown Editor
JavaScript
114
star
5

image-clipper

Node.js module for clipping & cropping JPEG, PNG, WebP images purely using the native Canvas APIs, excellent compatibility with the Browser & Electron & NW.js (Node-webkit), itself doesn't relies on any image processing libraries.
JavaScript
77
star
6

image-to-slices

Node.js module for converting image into slices with the given reference lines.
JavaScript
35
star
7

xss-filter

XSS (Cross-Site Script) Filter for Node.js & the browser, provides friendly, reliable XSS filter API for you.
JavaScript
20
star
8

gitlab-db

A lightweight Gitlab based JSON database with Mongo-style API.
JavaScript
8
star
9

slices

Node.js module for slicing given area into blocks with the given reference lines. 🍴 🍰
JavaScript
8
star
10

gulp-banner

A gulp plugin to insert a comment (or other string) at the top of the file.
JavaScript
5
star
11

pure-css-multi-level-menu

纯 CSS 实现的无限制级联菜单
CSS
4
star
12

superraytin.github.io

Leon's blog
CSS
4
star
13

underscore.template

Extracted template from Underscore, use "_.template" without full underscore source.
JavaScript
4
star
14

file-content-matcher

Search files recursively using content match.
JavaScript
3
star
15

github-style-page

Converting markdown content into HTML file with Github styles (GFW).
HTML
3
star
16

paginationjs-site

Website for http://pagination.js.org
CSS
2
star
17

light-pub-sub

Light pub/sub library for Javascript
JavaScript
2
star
18

Chopper

A Light Microblog System Based on Nodejs -- 轻量的多用户微博系统
JavaScript
2
star
19

node-comparev

Easily compare versions numbers (semver version)
JavaScript
1
star
20

duckJS

A Module Loader For JavaScript - Javascript模块加载器
JavaScript
1
star
21

RaytinJS

A Lightly JavaScript Library - 轻量的Javascript类库
JavaScript
1
star
22

jquery-countdown

jQuery countdown plugin.
1
star
23

douban-fm-shell

A shell for http://douban.fm
HTML
1
star
24

nodejs-socket-chat-demo

Node.js + Socket.io chat room demo
JavaScript
1
star
25

eventemitter-callback

Emit an event and waiting for a result.
JavaScript
1
star
26

roller

jQuery scroll Timing Solutions - jQuery定时滚动解决方案
1
star
27

html-webpack-simple-inject-plugin

Injects a custom string into the html-webpack-plugin output.
JavaScript
1
star
28

onlineTools

Better Online Tools For Programmers - 妈妈再也不用担心我找不到在线好工具啦beta2.0 (开发中)
CSS
1
star