psd-measure
Make it a fun to create spec by psd for developers and teammates
It works on node and browser.
Returned html is looks like the follow.
<div id="psd-root" data-hm-exclude style="width: 1100px; height: 1200px; background-image: base64...">
<div class="psd-layer"
data-title="title"
data-font-...="..."
data-radius-...="..."
data-box-shadow-...="..."
data-stroke-...="..."
data-text-...="..."
data-psd-index="0"
style="top, left, width, height"
></div>
<div class="psd-layer" data-psd-index="1" style="top, left, width, height"></div>
</div>Installation
npm install @moyuyc/psd-html
# or use yarn
yarn add @moyuyc/psd-htmlUsage
const { psdToHtmlFromBuffer } = require('psd-measure')
psdToHtmlFromBuffer('./path/to/psdfile').then(html => {
// ...
})Or using unpkg named PsdToHtml
API
Common API
The following APIs works on Node.js and Browser.
psdToHtml: psd => Promise<string>
psd argument is from psd.js
- Example
const PSD = require('psd')
const psd = PSD.fromFile('path/to/file.psd')
psdToHtml(psd).then(console.log)
psdToHAST: (psd, options) => Promise<object>
Returns hast (HTML Abstract Syntax Tree) asynchronously
psdToHtmlFromBuffer: (psdBuffer, options) => Promise<html>
psdBuffer should be instance of Buffer in Node.js, and Uint8Array in Browser
psdToHASTFromBuffer: (psdBuffer, options) => Promise<hast>
Browser API
psdToHtmlFromURL: (url, options) => Promise<html>
- Example
psdToHtmlFromURL('http://www.example.com/foo.psd').then(html => {
/* ... */
})
psdToHASTFromURL: (url, options) => Promise<hast>
Node.js API
psdToHtmlFromPath: (path, options) => Promise<html>
- Example
psdToHtmlFromPath('path/to/psdfile').then(html => {
/* ... */
})
psdToHASTFromPath: (path, options) => Promise<hast>
Options
unit
The html size's (height/width/top/left) style unit.
- Type: one of
'px' | 'rem' - Default:
'px'
remStandard
The rem unit's pixel standard. (e.g. 16 means: 1rem equals 16px)
- Type: number
- Default:
16
imageSplit
Use image for each layer, instead of the only root one.
- Type: boolean
- Default:
false
injectImage
Whether injecting image in html
- Type: boolean
- Default:
true
TODO
- [x] default font(size, family...) (deal with it temporarily)
- [ ] the exported
position / sizeis more larger (keyShapeInvalidated: false) - [ ] inset shadow
- [x] border
Authors
This library is written and maintained by imcuttle, moyuyc95@gmail.com.
License
MIT