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-processorUsing 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