JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q30069F
  • License MIT

A powerful JavaScript image processing tool

Package Exports

  • @jaxon_song/image-processor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jaxon_song/image-processor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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