Dynn-fx NPM | npm.io

Dynn-fx

Promise based graphics utility-belt

Usage

Here a usage example using React.

import React from 'react'
import { render } from 'react-dom'
import {fromUrl as fx, grayscale, crop, mirror, rotate, texturize} from 'dynn-fx'
import {baseImage, textureImage} from './image_urls'

const modifiedImage = fx(baseImage)
  .then(grayscale) // make image black / white
  .then(crop({x: 25, y:25, w: 50, h:50})) // take center from image
  .then(mirror) // mirror image
  .then(rotate) // rotate image 90degree to the right
  .then(texturize(textureImage)) // blend texture pattern into the image

// let's make a view for our new image
const App = image => <img src={image} alt='dynn-fx' />

// now render our freshly modified image
const whenAppIsReady = modifiedImage.then(App)

whenAppIsReady.then(app => render(app, document.getElementById('some-dom-el')))