Netherworld's Pretend Minibar

    @jaxon_song/image-processor

    1.1.5 • Public • Published

    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

    Install

    npm i @jaxon_song/image-processor

    DownloadsWeekly Downloads

    28

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    377 kB

    Total Files

    11

    Last publish

    Collaborators

    • jaxon_song