mirror of
https://github.com/konvajs/konva.git
synced 2025-04-24 19:03:56 +08:00

I added the experimental folder to show some work on filters that can be applied to an entire layer. Multiple filters can be applied to a layer (in any order, multiple times). To hook into the layer I use: layer.on('draw', filterFunc); Eventually, I would like to move that to `layer.filterFunc` and automatically apply it after the draw. `filterFunc` looks like: function filterFunc(){ // Get pixel data and create a temporary pixel buffer for working var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); var scratchData = this.getContext().createImageData(imageData); // Apply all filters here ColorStretch(imageData,scratchData,{}); // Copy the pixel data back this.getContext().putImageData(scratchData,0,0); } `ColorStretch` is an example of a filter. It takes 3 arguments: the original image data, image data to write the result to, and an options object.
15 lines
462 B
JavaScript
15 lines
462 B
JavaScript
Invert = (function () {
|
|
var Invert = function (src, dst, opt) {
|
|
var srcPixels = src.data,
|
|
dstPixels = dst.data,
|
|
nPixels = srcPixels.length,
|
|
i;
|
|
for (i = 0; i < nPixels; i += 4) {
|
|
dstPixels[i+0] = 255 - srcPixels[i+0]; // r
|
|
dstPixels[i+1] = 255 - srcPixels[i+1]; // g
|
|
dstPixels[i+2] = 255 - srcPixels[i+2]; // b
|
|
dstPixels[i+3] = srcPixels[i+3]; // copy alpha
|
|
}
|
|
};
|
|
return Invert;
|
|
})(); |