Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @jaxon_song/image-processor with all npm packages installed. Try it out:

var imageProcessor = require("@jaxon_song/image-processor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@jaxon_song/image-processor v1.1.5

A powerful JavaScript image processing tool

image-processor

A powerful JavaScript image processing tool, Including picture blending and LUT filter overlay.😎

Features

  • Url that supports incoming local or online pictures
  • Support for 27 image blend modes in PhotoShop
  • Support LUT filter overlay
  • Support for outputting blob and url of processed images
  • Support Node.js(^1.1.0)

Installing

Using npm:

  $ npm install @jaxon_song/image-processor

Using cdn:

  <script src="https://unpkg.com/@jaxon_song/image-processor/dist/bundle.min.js"></script>

Usage

blending method:

  const { blending } = require('@jaxon_song/image-processor')

  blending({
    srcOriginalImage: [url],
    srcTextureImage: [url],
    blendingMode: 'difference'
  })
    .then( data => {
      // data includes the blob object and url of the processed image
      console.log(data)
    })

lut method:

  const { lut } = require('@jaxon_song/image-processor')

  lut({
    srcOriginalImage: [url],
    srcLutImage: [url]
  })
    .then(data => {
      // data includes the blob object and url of the processed image
      console.log(data)
    })

Output the processed image to the canvas:

  const { blending, lut } = require('@jaxon_song/image-processor')

  // If the canvas element is passed, the processed image will be directly output to the canvas.

  blending({
    srcOriginalImage: [url],
    srcTextureImage: [url],
    blendingMode: 'difference',
    canvasOutput: [cnavas element]
  })

  lut({
    srcOriginalImage: [url],
    srcLutImage: [url],
    canvasOutput: [cnavas element]
  })

Used in Node.js

  const { lut, blending } = require('@jaxon_song/image-processor')
  /**
   * resolved a Buffer in Node.js
  */
  lut({
    srcOriginalImage: [url],    // Can be the path or link to the image file
    srcLutImage: [url], // Can be the path or link to the image file
  }).then(buffer => {
    console.log(buffer)   
  })

  blending({
    srcOriginalImage: [url], // Can be the path or link to the image file
    srcTextureImage: [url], // Can be the path or link to the image file
  }).then(buffer => {
    console.log(buffer)
  })

API

blending

  const { blending } = require('@jaxon_song/image-processor')

  blending({
    // Original image url ( Underlying image )
    srcOriginalImage: [string],
    // Mixed image url ( Upper picture )
    srcTextureImage: [string],
    // The canvas element to be output
    canvasOutput: [canvas element],
    // blending mode ( Same as PhotoShop's blend mode ). The default mode is multiply.
    blendingMode: [string],
    // A DOMString indicating the image format. The default type is image/jpeg.
    mimeType: [string],
    // A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored.
    quality: [number]
  })

lut

  const { lut } = require('@jaxon_song/image-processor')

  lut({
    // Original image url ( Underlying image )
    srcOriginalImage: [string],
    // lut image url ( Upper picture )
    srcLutImage: [string],
    // The canvas element to be output
    canvasOutput: [canvas element],
    // A DOMString indicating the image format. The default type is image/jpeg.
    mimeType: [string],
    // A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored.
    quality: [number]
  })

Blending Mode

NameMode
normalnormal
multiplymultiply
screenscreen
differencedifference
subtractsubtract
overlayoverlay
darkendarken
lightenlighten
exclusionexclusion
colorDodgecolor-dodge
colorBurncolor-burn
hardLighthard-light
softLightsoft-light
huehue
saturationsaturation
colorcolor
luminosityluminosity
dissolvedissolve
linearBurnlinear-burn
darkerColordarker-color
linearDodgelinear-dodge
lighterColorlighter-color
vividLightvivid-light
linearLightlinear-light
pinLightpin-light
hardMixhard-mix
dividedivide

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free