Built-in Filters
PinePaper includes a comprehensive set of image filters organized by category.
Color Filters
grayscale
Convert to black and white.
app.filterSystem.addFilter('grayscale', {
intensity: 1 // 0-1, how much grayscale to apply
});
sepia
Apply warm sepia tone.
app.filterSystem.addFilter('sepia', {
intensity: 1 // 0-1
});
invert
Invert all colors.
app.filterSystem.addFilter('invert', {
intensity: 1 // 0-1
});
colorOverlay
Add a color tint.
app.filterSystem.addFilter('colorOverlay', {
color: '#ff8800', // Tint color
intensity: 0.3, // 0-1
blendMode: 'overlay' // 'multiply', 'overlay', 'screen'
});
posterize
Reduce color levels.
app.filterSystem.addFilter('posterize', {
levels: 4 // 2-32, number of color levels
});
Adjustment Filters
brightness
Adjust image brightness.
app.filterSystem.addFilter('brightness', {
value: 20 // -100 to 100
});
contrast
Adjust image contrast.
app.filterSystem.addFilter('contrast', {
value: 30 // -100 to 100
});
saturation
Adjust color saturation.
app.filterSystem.addFilter('saturation', {
value: 50 // -100 to 100
});
sharpen
Increase image sharpness.
app.filterSystem.addFilter('sharpen', {
intensity: 50 // 0-100
});
Blur Filters
blur
Apply gaussian blur.
app.filterSystem.addFilter('blur', {
radius: 5 // 0-20 pixels
});
Effect Filters
vignette
Add vignette darkening around edges.
app.filterSystem.addFilter('vignette', {
intensity: 0.5, // 0-1, darkness amount
radius: 0.5 // 0-1, where falloff starts
});
emboss
3D emboss effect.
app.filterSystem.addFilter('emboss', {
intensity: 1 // 0-1
});
Texture Filters
noise
Add film grain effect.
app.filterSystem.addFilter('noise', {
intensity: 20, // 0-100
monochrome: true // true = grayscale noise, false = color noise
});
Preset Filters
vintage
Complete vintage film look (combines sepia, vignette, noise).
app.filterSystem.addFilter('vintage', {
intensity: 1 // 0-1
});
Parameter Reference
| Filter | Category | Parameters |
|---|---|---|
| grayscale | color | intensity (0-1) |
| sepia | color | intensity (0-1) |
| invert | color | intensity (0-1) |
| colorOverlay | color | color, intensity, blendMode |
| posterize | color | levels (2-32) |
| brightness | adjustment | value (-100 to 100) |
| contrast | adjustment | value (-100 to 100) |
| saturation | adjustment | value (-100 to 100) |
| sharpen | adjustment | intensity (0-100) |
| blur | blur | radius (0-20) |
| vignette | effect | intensity, radius (0-1 each) |
| emboss | effect | intensity (0-1) |
| noise | texture | intensity (0-100), monochrome |
| vintage | preset | intensity (0-1) |
Example: Photo Enhancement
// Basic photo enhancement stack
app.filterSystem.addFilter('brightness', { value: 10 });
app.filterSystem.addFilter('contrast', { value: 15 });
app.filterSystem.addFilter('saturation', { value: 10 });
app.filterSystem.addFilter('sharpen', { intensity: 30 });
app.filterSystem.addFilter('vignette', { intensity: 0.2, radius: 0.6 });
Example: Moody Dark Scene
app.filterSystem.addFilter('brightness', { value: -20 });
app.filterSystem.addFilter('contrast', { value: 40 });
app.filterSystem.addFilter('saturation', { value: -30 });
app.filterSystem.addFilter('colorOverlay', {
color: '#1e3a5f',
intensity: 0.2,
blendMode: 'overlay'
});
app.filterSystem.addFilter('vignette', { intensity: 0.6, radius: 0.3 });