lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:07:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: change Filter input and output

Browse Source
This commit is contained in:
quark 2024-08-19 09:57:31 +08:00
parent 583fccf249
commit de580be9b5
21 changed files with 239 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Node.ts
View File

@ -15,7 +15,8 @@ import { Context } from './Context';
import { Shape } from './Shape';
import { Layer } from './Layer';
export type Filter = (this: Node, imageData: ImageData) => void;
export type LegalCanvas = HTMLCanvasElement | OffscreenCanvas;
export type Filter = (this: Node, canvas: LegalCanvas) => void;
type globalCompositeOperationType =
| ''
@ -163,7 +164,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
_dragEventId: number | null = null;
_shouldFireChangeEvents = false;
constructor(config?: Config) {
constructor (config?: Config) {
// on initial set attrs wi don't need to fire change events
// because nobody is listening to them yet
this.setAttrs(config);
@ -591,12 +592,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
sceneCanvas.getWidth() / ratio,
sceneCanvas.getHeight() / ratio
);
imageData = filterContext.getImageData(
0,
0,
filterCanvas.getWidth(),
filterCanvas.getHeight()
);
let canvas = Util.createOffScreenCanvas(filterCanvas.getWidth(), filterCanvas.getHeight());
// apply filters to filter context
for (n = 0; n < len; n++) {
@ -609,9 +605,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
);
continue;
}
filter.call(this, imageData);
filterContext.putImageData(imageData, 0, 0);
canvas = filter.call(this, canvas);
}
// draw the final result on top of scene canvas
filterContext.drawImage(canvas, 0, 0);
} catch (e: any) {
Util.error(
'Unable to apply filter. ' +

13
src/Util.ts
View File

@ -29,7 +29,7 @@ import { IRect, RGB, RGBA, Vector2d } from './types';
export class Transform {
m: Array<number>;
dirty = false;
constructor(m = [1, 0, 0, 1, 0, 0]) {
constructor (m = [1, 0, 0, 1, 0, 0]) {
this.m = (m && m.slice()) || [1, 0, 0, 1, 0, 0];
}
reset() {
@ -509,9 +509,18 @@ export const Util = {
// on some environments canvas.style is readonly
try {
(<any>canvas).style = canvas.style || {};
} catch (e) {}
} catch (e) { }
return canvas;
},
createOffScreenCanvas(size: { width: number; height: number }) {
if (window.OffscreenCanvas !== undefined) {
return new OffscreenCanvas(size.width, size.height);
}
const canvas = this.createCanvasElement();
canvas.width = size.width;
canvas.height = size.height;
return canvas;
}
createImageElement() {
return document.createElement('img');
},

13
src/filters/Blur.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
/*
the Gauss filter
@ -358,15 +358,20 @@ function filterGaussBlurRGBA(imageData, radius) {
* @function
* @name Blur
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Blur]);
* node.blurRadius(10);
*/
export const Blur: Filter = function Blur(imageData) {
export const Blur: Filter = function Blur(canvas: LegalCanvas) {
var radius = Math.round(this.blurRadius());
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
if (radius > 0) {
filterGaussBlurRGBA(imageData, radius);
}

15
src/filters/Brighten.ts
View File

@ -1,18 +1,24 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Brighten Filter.
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Brighten]);
* node.brightness(0.8);
*/
export const Brighten: Filter = function (imageData) {
export const Brighten: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var brightness = this.brightness() * 255,
data = imageData.data,
len = data.length,
@ -26,6 +32,9 @@ export const Brighten: Filter = function (imageData) {
// blue
data[i + 2] += brightness;
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

15
src/filters/Contrast.ts
View File

@ -1,18 +1,24 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Contrast Filter.
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Contrast]);
* node.contrast(10);
*/
export const Contrast: Filter = function (imageData) {
export const Contrast: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var adjust = Math.pow((this.contrast() + 100) / 100, 2);
var data = imageData.data,
@ -56,6 +62,9 @@ export const Contrast: Filter = function (imageData) {
data[i + 1] = green;
data[i + 2] = blue;
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
/**

15
src/filters/Emboss.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { Util } from '../Util';
import { getNumberValidator } from '../Validators';
/**
@ -9,7 +9,7 @@ import { getNumberValidator } from '../Validators';
* License: [http://www.pixastic.com/lib/license.txt]
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Emboss]);
@ -18,11 +18,17 @@ import { getNumberValidator } from '../Validators';
* node.embossDirection('right');
* node.embossBlend(true);
*/
export const Emboss: Filter = function (imageData) {
export const Emboss: Filter = function (canvas: LegalCanvas) {
// pixastic strength is between 0 and 10. I want it between 0 and 1
// pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,
// a max value of greyLevel yields a white emboss, and the min value yields a black
// emboss. Therefore, I changed greyLevel to whiteLevel
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var strength = this.embossStrength() * 10,
greyLevel = this.embossWhiteLevel() * 255,
direction = this.embossDirection(),
@ -138,6 +144,9 @@ export const Emboss: Filter = function (imageData) {
}
} while (--x);
} while (--y);
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

14
src/filters/Enhance.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
@ -30,14 +30,20 @@ function remap(fromValue, fromMin, fromMax, toMin, toMax) {
* @function
* @name Enhance
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Enhance]);
* node.enhance(0.4);
*/
export const Enhance: Filter = function (imageData) {
export const Enhance: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nSubPixels = data.length,
rMin = data[0],
@ -134,6 +140,8 @@ export const Enhance: Filter = function (imageData) {
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
//data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
/**

14
src/filters/Grayscale.ts
View File

@ -1,15 +1,21 @@
import { Filter } from '../Node';
import { Filter, LegalCanvas } from '../Node';
/**
* Grayscale Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Grayscale]);
*/
export const Grayscale: Filter = function (imageData) {
export const Grayscale: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
len = data.length,
i,
@ -24,4 +30,6 @@ export const Grayscale: Filter = function (imageData) {
// blue
data[i + 2] = brightness;
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};

14
src/filters/HSL.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
Factory.addGetterSetter(
@ -51,14 +51,20 @@ Factory.addGetterSetter(
* HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* image.filters([Konva.Filters.HSL]);
* image.luminance(0.2);
*/
export const HSL: Filter = function (imageData) {
export const HSL: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nPixels = data.length,
v = 1,
@ -105,4 +111,6 @@ export const HSL: Filter = function (imageData) {
data[i + 2] = br * r + bg * g + bb * b + l;
data[i + 3] = a; // alpha
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};

12
src/filters/HSV.ts
View File

@ -7,14 +7,20 @@ import { getNumberValidator } from '../Validators';
* @function
* @name HSV
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* image.filters([Konva.Filters.HSV]);
* image.value(200);
*/
export const HSV: Filter = function (imageData) {
export const HSV: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nPixels = data.length,
v = Math.pow(2, this.value()),
@ -60,6 +66,8 @@ export const HSV: Filter = function (imageData) {
data[i + 2] = br * r + bg * g + bb * b;
data[i + 3] = a; // alpha
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

12
src/filters/Invert.ts
View File

@ -3,12 +3,18 @@ import { Filter } from '../Node';
* Invert Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Invert]);
*/
export const Invert: Filter = function (imageData) {
export const Invert: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
len = data.length,
i;
@ -21,4 +27,6 @@ export const Invert: Filter = function (imageData) {
// blue
data[i + 2] = 255 - data[i + 2];
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};

10
src/filters/Kaleidoscope.ts
View File

@ -177,7 +177,13 @@ var FromPolar = function (src, dst, opt) {
* node.kaleidoscopePower(3);
* node.kaleidoscopeAngle(45);
*/
export const Kaleidoscope: Filter = function (imageData) {
export const Kaleidoscope: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var xSize = imageData.width,
ySize = imageData.height;
@ -263,6 +269,8 @@ export const Kaleidoscope: Filter = function (imageData) {
// Convert back from polar coordinates
FromPolar(scratchData, imageData, { polarRotation: 0 });
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
/**

15
src/filters/Mask.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
function pixelAt(idata, x, y) {
@ -173,13 +173,19 @@ function smoothEdgeMask(mask, sw, sh) {
* @function
* @name Mask
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Mask]);
* node.threshold(200);
*/
export const Mask: Filter = function (imageData) {
export const Mask: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
// Detect pixels close to the background color
var threshold = this.threshold(),
mask = backgroundMask(imageData, threshold);
@ -197,7 +203,8 @@ export const Mask: Filter = function (imageData) {
applyMask(imageData, mask);
}
return imageData;
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

12
src/filters/Noise.ts
View File

@ -7,14 +7,20 @@ import { getNumberValidator } from '../Validators';
* @function
* @name Noise
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Noise]);
* node.noise(0.8);
*/
export const Noise: Filter = function (imageData) {
export const Noise: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
@ -26,6 +32,8 @@ export const Noise: Filter = function (imageData) {
data[i + 1] += half - 2 * half * Math.random();
data[i + 2] += half - 2 * half * Math.random();
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

13
src/filters/Pixelate.ts
View File

@ -10,7 +10,7 @@ import { getNumberValidator } from '../Validators';
* @function
* @name Pixelate
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* node.cache();
@ -18,7 +18,13 @@ import { getNumberValidator } from '../Validators';
* node.pixelSize(10);
*/
export const Pixelate: Filter = function (imageData) {
export const Pixelate: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
@ -103,6 +109,9 @@ export const Pixelate: Filter = function (imageData) {
}
}
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

14
src/filters/Posterize.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Node, Filter, LegalCanvas } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Posterize Filter. Adjusts the channels so that there are no more
@ -9,14 +9,20 @@ import { getNumberValidator } from '../Validators';
* @name Posterize
* @author ippo615
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Posterize]);
* node.levels(0.8); // between 0 and 1
*/
export const Posterize: Filter = function (imageData) {
export const Posterize: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
// level must be between 1 and 255
var levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,
@ -27,6 +33,8 @@ export const Posterize: Filter = function (imageData) {
for (i = 0; i < len; i += 1) {
data[i] = Math.floor(data[i] / scale) * scale;
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(

12
src/filters/RGB.ts
View File

@ -7,7 +7,7 @@ import { RGBComponent } from '../Validators';
* @function
* @name RGB
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* node.cache();
@ -16,7 +16,13 @@ import { RGBComponent } from '../Validators';
* node.green(200);
*/
export const RGB: Filter = function (imageData) {
export const RGB: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nPixels = data.length,
red = this.red(),
@ -33,6 +39,8 @@ export const RGB: Filter = function (imageData) {
data[i + 2] = brightness * blue; // b
data[i + 3] = data[i + 3]; // alpha
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(Node, 'red', 0, function (this: Node, val) {

12
src/filters/RGBA.ts
View File

@ -7,7 +7,7 @@ import { RGBComponent } from '../Validators';
* @function
* @name RGBA
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author codefo
* @example
* node.cache();
@ -17,7 +17,13 @@ import { RGBComponent } from '../Validators';
* node.alpha(0.3);
*/
export const RGBA: Filter = function (imageData) {
export const RGBA: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nPixels = data.length,
red = this.red(),
@ -34,6 +40,8 @@ export const RGBA: Filter = function (imageData) {
data[i + 1] = green * alpha + data[i + 1] * ia; // g
data[i + 2] = blue * alpha + data[i + 2] * ia; // b
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(Node, 'red', 0, function (this: Node, val: number) {

12
src/filters/Sepia.ts
View File

@ -6,12 +6,18 @@ import { Filter } from '../Node';
* @function
* @name Sepia
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Sepia]);
*/
export const Sepia: Filter = function (imageData) {
export const Sepia: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
nPixels = data.length,
i,
@ -28,4 +34,6 @@ export const Sepia: Filter = function (imageData) {
data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};

12
src/filters/Solarize.ts
View File

@ -7,13 +7,19 @@ import { Filter } from '../Node';
* @function
* @name Solarize
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @example
* node.cache();
* node.filters([Konva.Filters.Solarize]);
*/
export const Solarize: Filter = function (imageData) {
export const Solarize: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var data = imageData.data,
w = imageData.width,
h = imageData.height,
@ -44,4 +50,6 @@ export const Solarize: Filter = function (imageData) {
data[offset + 2] = b;
} while (--x);
} while (--y);
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};

12
src/filters/Threshold.ts
View File

@ -8,7 +8,7 @@ import { getNumberValidator } from '../Validators';
* @function
* @name Threshold
* @memberof Konva.Filters
* @param {Object} imageData
* * @param {LegalCanvas} canvas
* @author ippo615
* @example
* node.cache();
@ -16,7 +16,13 @@ import { getNumberValidator } from '../Validators';
* node.threshold(0.1);
*/
export const Threshold: Filter = function (imageData) {
export const Threshold: Filter = function (canvas: LegalCanvas) {
const imageData = canvas.context.getImageData(
0,
0,
canvas.width,
canvas.height
);
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,
@ -25,6 +31,8 @@ export const Threshold: Filter = function (imageData) {
for (i = 0; i < len; i += 1) {
data[i] = data[i] < level ? 0 : 255;
}
canvas.context.putImageData(imageData, 0, 0);
return canvas;
};
Factory.addGetterSetter(