@jaxon_song/image-processor

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

Name	Mode
normal	normal
multiply	multiply
screen	screen
difference	difference
subtract	subtract
overlay	overlay
darken	darken
lighten	lighten
exclusion	exclusion
colorDodge	color-dodge
colorBurn	color-burn
hardLight	hard-light
softLight	soft-light
hue	hue
saturation	saturation
color	color
luminosity	luminosity
dissolve	dissolve
linearBurn	linear-burn
darkerColor	darker-color
linearDodge	linear-dodge
lighterColor	lighter-color
vividLight	vivid-light
linearLight	linear-light
pinLight	pin-light
hardMix	hard-mix
divide	divide

License

MIT