Code Monkey home page Code Monkey logo

fasthtml's Introduction

fastHtml

一个简单的psd直接导出html的工具

自己工作常用整理

适合单页面且采用DOM结构布局的H5页面,基于Canvas的H5请使用Flash2x+AnnieJS!

导出前的准备

先对psd里图层做整理,文字要栅格化图层,图层也要栅格化,剪切蒙版也要格式化掉,只保留基本图层和分组结构

使用

cnpm install //安装包

npm start {psd文件路径} //文件路径,必须指定! 如:npm start 001.psd

目录说明

—lib/ //解析psd的脚本,核心部分

—export/ //导出目录

—tmp.html //生成的HTML结构模板文件,此为基础结构

—package.json //包json文件,npm install 安装

特点

所有div元素的定位采用rem,适配更多浏览器

根据psd文件名生成单独的目录,不会互相覆盖

独立的HTML结构,方便多个单页整合到一起

感谢:

https://github.com/meltingice/psd.js ,此为核心

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.