mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
renamed ColorStretch filter to Enhance. cleaned up the code a bit. updated tests. changed function signature back to just image data
This commit is contained in:
Eric Rowell
parent
a0d0f23ef8
commit
374bc22680
@ -17,7 +17,7 @@ module.exports = function(grunt) {
|
||||
'src/filters/Mask.js',
|
||||
'src/filters/ColorPack.js',
|
||||
'src/filters/ConvolvePack.js',
|
||||
'src/filters/ColorStretch.js',
|
||||
'src/filters/Enhance.js',
|
||||
'src/filters/Flip.js',
|
||||
'src/filters/Levels.js',
|
||||
'src/filters/Mirror.js',
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
(function () {
|
||||
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
|
||||
|
||||
// Make sure min is less than max (covered outside)
|
||||
/*
|
||||
var swap;
|
||||
if (fromMin > fromMax) {
|
||||
swap = fromMax;
|
||||
fromMin = fromMax;
|
||||
fromMin = swap;
|
||||
}
|
||||
if (toMin > toMax) {
|
||||
swap = toMax;
|
||||
toMin = toMax;
|
||||
toMin = swap;
|
||||
}
|
||||
*/
|
||||
|
||||
// Compute the range of the data
|
||||
var fromRange = fromMax - fromMin;
|
||||
var toRange = toMax - toMin;
|
||||
|
||||
// If either range is 0, then the value can only be mapped to 1 value
|
||||
if (fromRange === 0) {
|
||||
return toMin + toRange / 2;
|
||||
}
|
||||
if (toRange === 0) {
|
||||
return toMin;
|
||||
}
|
||||
|
||||
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
|
||||
var toValue = (fromValue - fromMin) / fromRange;
|
||||
toValue = (toRange * toValue) + toMin;
|
||||
|
||||
return toValue;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ColorStretch Filter. Adjusts the colors so that they span the widest
|
||||
* possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
|
||||
* writes.
|
||||
* @function
|
||||
* @author ippo615
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {ImageData} src, the source image data (what will be transformed)
|
||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||
* @param {Object} opt, There are no options for this filter
|
||||
*/
|
||||
|
||||
var ColorStretch = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
nPixels = srcPixels.length,
|
||||
i;
|
||||
|
||||
// 1st Pass - find the min and max for each channel:
|
||||
var rMin = srcPixels[0], rMax = rMin, r,
|
||||
gMin = srcPixels[1], gMax = gMin, g,
|
||||
bMin = srcPixels[3], bMax = bMin, b,
|
||||
aMin = srcPixels[4], aMax = aMin, a;
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
r = srcPixels[i + 0];
|
||||
if (r < rMin) { rMin = r; } else
|
||||
if (r > rMax) { rMax = r; }
|
||||
g = srcPixels[i + 1];
|
||||
if (g < gMin) { gMin = g; } else
|
||||
if (g > gMax) { gMax = g; }
|
||||
b = srcPixels[i + 2];
|
||||
if (b < bMin) { bMin = b; } else
|
||||
if (b > bMax) { bMax = b; }
|
||||
a = srcPixels[i + 3];
|
||||
if (a < aMin) { aMin = a; } else
|
||||
if (a > aMax) { aMax = a; }
|
||||
}
|
||||
|
||||
// If there is only 1 level - don't remap
|
||||
if( rMax === rMin ){ rMax = 255; rMin = 0; }
|
||||
if( gMax === gMin ){ gMax = 255; gMin = 0; }
|
||||
if( bMax === bMin ){ bMax = 255; bMin = 0; }
|
||||
if( aMax === aMin ){ aMax = 255; aMin = 0; }
|
||||
|
||||
// Pass 2 - remap everything to fill the full range
|
||||
for (i = 0; i < nPixels; i += 1) {
|
||||
dstPixels[i + 0] = remap(srcPixels[i + 0], rMin, rMax, 0, 255);
|
||||
dstPixels[i + 1] = remap(srcPixels[i + 1], gMin, gMax, 0, 255);
|
||||
dstPixels[i + 2] = remap(srcPixels[i + 2], bMin, bMax, 0, 255);
|
||||
dstPixels[i + 3] = remap(srcPixels[i + 3], aMin, aMax, 0, 255);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Kinetic.Filters.ColorStretch = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
ColorStretch(src, dst||src, opt );
|
||||
}else{
|
||||
ColorStretch.call(this, src, dst||src, opt);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
72
src/filters/Enhance.js
Normal file
72
src/filters/Enhance.js
Normal file
@ -0,0 +1,72 @@
|
||||
(function () {
|
||||
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
|
||||
// Compute the range of the data
|
||||
var fromRange = fromMax - fromMin,
|
||||
toRange = toMax - toMin,
|
||||
toValue;
|
||||
|
||||
// If either range is 0, then the value can only be mapped to 1 value
|
||||
if (fromRange === 0) {
|
||||
return toMin + toRange / 2;
|
||||
}
|
||||
if (toRange === 0) {
|
||||
return toMin;
|
||||
}
|
||||
|
||||
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
|
||||
toValue = (fromValue - fromMin) / fromRange;
|
||||
toValue = (toRange * toValue) + toMin;
|
||||
|
||||
return toValue;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Enhance Filter. Adjusts the colors so that they span the widest
|
||||
* possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
|
||||
* writes.
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
*/
|
||||
Kinetic.Filters.Enhance = function (imageData) {
|
||||
var data = imageData.data,
|
||||
nPixels = data.length,
|
||||
rMin = data[0], rMax = rMin, r,
|
||||
gMin = data[1], gMax = gMin, g,
|
||||
bMin = data[3], bMax = bMin, b,
|
||||
aMin = data[4], aMax = aMin, a,
|
||||
i;
|
||||
|
||||
// 1st Pass - find the min and max for each channel:
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
r = data[i + 0];
|
||||
if (r < rMin) { rMin = r; } else
|
||||
if (r > rMax) { rMax = r; }
|
||||
g = data[i + 1];
|
||||
if (g < gMin) { gMin = g; } else
|
||||
if (g > gMax) { gMax = g; }
|
||||
b = data[i + 2];
|
||||
if (b < bMin) { bMin = b; } else
|
||||
if (b > bMax) { bMax = b; }
|
||||
a = data[i + 3];
|
||||
if (a < aMin) { aMin = a; } else
|
||||
if (a > aMax) { aMax = a; }
|
||||
}
|
||||
|
||||
// If there is only 1 level - don't remap
|
||||
if( rMax === rMin ){ rMax = 255; rMin = 0; }
|
||||
if( gMax === gMin ){ gMax = 255; gMin = 0; }
|
||||
if( bMax === bMin ){ bMax = 255; bMin = 0; }
|
||||
if( aMax === aMin ){ aMax = 255; aMin = 0; }
|
||||
|
||||
// Pass 2 - remap everything to fill the full range
|
||||
for (i = 0; i < nPixels; i += 1) {
|
||||
data[i + 0] = remap(data[i + 0], rMin, rMax, 0, 255);
|
||||
data[i + 1] = remap(data[i + 1], gMin, gMax, 0, 255);
|
||||
data[i + 2] = remap(data[i + 2], bMin, bMax, 0, 255);
|
||||
data[i + 3] = remap(data[i + 3], aMin, aMax, 0, 255);
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -88,8 +88,8 @@
|
||||
<script src="unit/filters/Mask-test.js"></script>
|
||||
<!--<script src="unit/filters/ConvolvePack-test.js"></script>-->
|
||||
<script src="unit/filters/Grayscale-test.js"></script>
|
||||
<!--<script src="unit/filters/ColorStretch-test.js"></script>
|
||||
<script src="unit/filters/Polar-test.js"></script>
|
||||
<script src="unit/filters/Enhance-test.js"></script>
|
||||
<!--<script src="unit/filters/Polar-test.js"></script>
|
||||
<script src="unit/filters/Pixelate-test.js"></script>
|
||||
<script src="unit/filters/Noise-test.js"></script>
|
||||
<script src="unit/filters/Threshold-test.js"></script>
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
suite('Color Stretch', function () {
|
||||
// ======================================================
|
||||
test('enhancing colors on layer', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0, 0, this.getCanvas().width/2, this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.ColorStretch(imageData, scratchData, {});
|
||||
this.getContext().putImageData(scratchData, 0, 0);
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('on image', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
var filt = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
var orig = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(filt);
|
||||
layer.add(orig);
|
||||
stage.add(layer);
|
||||
|
||||
filt.setFilter(Kinetic.Filters.ColorStretch);
|
||||
layer.draw();
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/bamoon.jpg';
|
||||
|
||||
});
|
||||
});
|
||||
36
test/unit/filters/Enhance-test.js
Normal file
36
test/unit/filters/Enhance-test.js
Normal file
@ -0,0 +1,36 @@
|
||||
suite('Enhance', function () {
|
||||
// ======================================================
|
||||
test('on image', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
var filt = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
var orig = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(filt);
|
||||
layer.add(orig);
|
||||
stage.add(layer);
|
||||
|
||||
filt.cache();
|
||||
filt.filters([Kinetic.Filters.Enhance]);
|
||||
layer.draw();
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/bamoon.jpg';
|
||||
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user