psd-render

PSD-render is a javascript library for rendering image from psd json data which can run on both browser and nodejs

Installation

yarn add psd-render         // Production version
yarn add psd-render@dev     // Development version
yarn add psd-render@staging // Staging version

Usage

import { PODDesign } from 'psd-render'

const podDesign = new PODDesign({ mockup, artwork, imageHost },
                                this.customOptions)
const canPreview = podDesign.canPreview()
if(canPreview.canPreview){
  const image = podDesign.getImagePreview()
}

Document

PODDesign

• canPreview()
• getCanvasPreview()
• getImagePreview()

PSDRender

• canPreview()
• preloadData()
• getCanvasPreview()
• getImagePreview()

PODDesign

new PODDesign({mockup, artwork, imageHost, isDebug}, 
customOptions?:Array, currentColor?:String) => PODDesign

canPreview()

canPreview() => Boolean

Check if a design can be previewed or not

getCanvasPreview()

cosnt {artworkCanvas, mockupCanvas, printAreaCanvas} = await getCanvasPreview()

Get canvas elements to preview from design

getImagePreview()

cosnt {artwork, mockup, printArea} = await getImagePreview()

Get image elements to preview from design

PSDRender

new PSDRender({layers, width, height, partName, imageHost, isDebug}, 
dataObjects = {}, replacePreviewLayer?: Object, 
customOptions?:Array, currentColor?:String) => PODDesign

canPreview()

canPreview() => Boolean

Check if a design can be previewed or not

preloadData()

await preloadData()

Preload image, fonts to create preview

getCanvasPreview()

const canvas = await getCanvasPreview()

MUST call preloadData() first. Get canvas element to preview from design

getImagePreview()

const image = await getImagePreview()

MUST call preloadData() first. Get image element to preview from design

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT