Giter Club home page Giter Club logo

h5psd's Introduction

NPM version Build Status Coverage Status

Converting PSD files into mobile page

PSD 转换成移动端页面的工具。

功能

  • 自动导出图层的 PNG 文件；
  • 导出 PNG 用 hash 命名，避免出现重复素材；
  • 自动判断背景图；
  • 可以使用自定义模板。（ 使用 jdists 编写）。

预制模板

  • tpl/page.html 标准模板
  • tpl/auto-bottom.html 自动计算需要居底的图层

效果

线上体验

  • 输出的网页 image

  • PSD 设计稿 image

使用

PSD 准备

  • 模式 RGB 颜色、8 位通道；
  • 合并和栅格化实际的图层；
  • 隐藏不需要导出的图层。

安装

$ npm install h5psd [-g]

命令行

Usage:

    h5psd <input list> [options]

Options:

    -v, --version                Output h5psd version.
    -o, --output                 Output directory (default input directory).
    -s, --images                 Images directory (default "images").
    -l, --layer                  Export "<name>.layer" file (default false).
    -n, --name                   Enable the "name" attribute (default false).
    -t, --template               Page jdists template file.

License

MIT © zswang

h5psd's People

Contributors

ufologist avatar zswang avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jahon troland studyforfun knightbubble moooyy 303182519 doerme micro-teacher sdgdsffdsfff webchange zhanglei1995 ljkikyo limingziqiang viterl cpanmac dhj2020 blueflylin simple555a won21kr kesyn claude123123 catest zhengkai7651 chinazzlm suktec webhj wuding129 zhougogo snow0622 sh9930119 26597925 qiusa h5canvas superfoam jindasong ahwhfei linfenpan tourdt bubueric gottaboy xia-xian dzeze

h5psd's Issues

全是图片会不会太大了?

我有一个40M的PSD
生成后光image文件夹就有10M
这才是一个移动端页面,这要是放在移动端可怎么放,,, 加载慢死了

图片 URL 分隔符是反斜杠造成背景图片无法加载

在 Window 系统中生成的图片 URL 分隔符是反斜杠().
backgroud-image-wrong-url

background:url(images\107957.png) no-repeat;

这会造成无法加载背景图片, img 中包含的 URL 也一样有反斜杠, 但浏览器似乎有容错机制.

<img class="layer" src="images\c334bf.png" style="left:48px;top:53px;" width="104" height="106">

分析代码 URL 错误是由于使用了兼容系统的路径拼接造成的

image = path.join(images, flag.slice(1, 7) + '.png');

Linux 和 Window 分别采用了不同的路径分隔符(正斜杠和反斜杠), 因此会生成的不同的 URL.

d:\window\b\c

root/linux/b/c

为了避免跨平台问题, 还是直接拼接 URL 好了

image = images + '/' + flag.slice(1, 7) + '.png';

修改代码后的效果, URL 正常了
backgroud-image-correct-url

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.