You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
10 KiB
JavaScript
350 lines
10 KiB
JavaScript
import SubImage from './subImage';
|
|
import {hsv2rgb} from '../common/cv_utils';
|
|
import ArrayHelper from '../common/array_helper';
|
|
const vec2 = {
|
|
clone: require('gl-vec2/clone'),
|
|
};
|
|
|
|
/**
|
|
* Represents a basic image combining the data and size.
|
|
* In addition, some methods for manipulation are contained.
|
|
* @param size {x,y} The size of the image in pixel
|
|
* @param data {Array} If given, a flat array containing the pixel data
|
|
* @param ArrayType {Type} If given, the desired DataType of the Array (may be typed/non-typed)
|
|
* @param initialize {Boolean} Indicating if the array should be initialized on creation.
|
|
* @returns {ImageWrapper}
|
|
*/
|
|
function ImageWrapper(size, data, ArrayType, initialize) {
|
|
if (!data) {
|
|
if (ArrayType) {
|
|
this.data = new ArrayType(size.x * size.y);
|
|
if (ArrayType === Array && initialize) {
|
|
ArrayHelper.init(this.data, 0);
|
|
}
|
|
} else {
|
|
this.data = new Uint8Array(size.x * size.y);
|
|
if (Uint8Array === Array && initialize) {
|
|
ArrayHelper.init(this.data, 0);
|
|
}
|
|
}
|
|
} else {
|
|
this.data = data;
|
|
}
|
|
this.size = size;
|
|
}
|
|
|
|
/**
|
|
* tests if a position is within the image with a given offset
|
|
* @param imgRef {x, y} The location to test
|
|
* @param border Number the padding value in pixel
|
|
* @returns {Boolean} true if location inside the image's border, false otherwise
|
|
* @see cvd/image.h
|
|
*/
|
|
ImageWrapper.prototype.inImageWithBorder = function(imgRef, border) {
|
|
return (imgRef.x >= border)
|
|
&& (imgRef.y >= border)
|
|
&& (imgRef.x < (this.size.x - border))
|
|
&& (imgRef.y < (this.size.y - border));
|
|
};
|
|
|
|
/**
|
|
* Performs bilinear sampling
|
|
* @param inImg Image to extract sample from
|
|
* @param x the x-coordinate
|
|
* @param y the y-coordinate
|
|
* @returns the sampled value
|
|
* @see cvd/vision.h
|
|
*/
|
|
ImageWrapper.sample = function(inImg, x, y) {
|
|
var lx = Math.floor(x);
|
|
var ly = Math.floor(y);
|
|
var w = inImg.size.x;
|
|
var base = ly * inImg.size.x + lx;
|
|
var a = inImg.data[base + 0];
|
|
var b = inImg.data[base + 1];
|
|
var c = inImg.data[base + w];
|
|
var d = inImg.data[base + w + 1];
|
|
var e = a - b;
|
|
x -= lx;
|
|
y -= ly;
|
|
|
|
var result = Math.floor(x * (y * (e - c + d) - e) + y * (c - a) + a);
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Initializes a given array. Sets each element to zero.
|
|
* @param array {Array} The array to initialize
|
|
*/
|
|
ImageWrapper.clearArray = function(array) {
|
|
var l = array.length;
|
|
while (l--) {
|
|
array[l] = 0;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Creates a {SubImage} from the current image ({this}).
|
|
* @param from {ImageRef} The position where to start the {SubImage} from. (top-left corner)
|
|
* @param size {ImageRef} The size of the resulting image
|
|
* @returns {SubImage} A shared part of the original image
|
|
*/
|
|
ImageWrapper.prototype.subImage = function(from, size) {
|
|
return new SubImage(from, size, this);
|
|
};
|
|
|
|
/**
|
|
* Creates an {ImageWrapper) and copies the needed underlying image-data area
|
|
* @param imageWrapper {ImageWrapper} The target {ImageWrapper} where the data should be copied
|
|
* @param from {ImageRef} The location where to copy from (top-left location)
|
|
*/
|
|
ImageWrapper.prototype.subImageAsCopy = function(imageWrapper, from) {
|
|
var sizeY = imageWrapper.size.y, sizeX = imageWrapper.size.x;
|
|
var x, y;
|
|
for ( x = 0; x < sizeX; x++) {
|
|
for ( y = 0; y < sizeY; y++) {
|
|
imageWrapper.data[y * sizeX + x] = this.data[(from.y + y) * this.size.x + from.x + x];
|
|
}
|
|
}
|
|
};
|
|
|
|
ImageWrapper.prototype.copyTo = function(imageWrapper) {
|
|
var length = this.data.length, srcData = this.data, dstData = imageWrapper.data;
|
|
|
|
while (length--) {
|
|
dstData[length] = srcData[length];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Retrieves a given pixel position from the image
|
|
* @param x {Number} The x-position
|
|
* @param y {Number} The y-position
|
|
* @returns {Number} The grayscale value at the pixel-position
|
|
*/
|
|
ImageWrapper.prototype.get = function(x, y) {
|
|
return this.data[y * this.size.x + x];
|
|
};
|
|
|
|
/**
|
|
* Retrieves a given pixel position from the image
|
|
* @param x {Number} The x-position
|
|
* @param y {Number} The y-position
|
|
* @returns {Number} The grayscale value at the pixel-position
|
|
*/
|
|
ImageWrapper.prototype.getSafe = function(x, y) {
|
|
var i;
|
|
|
|
if (!this.indexMapping) {
|
|
this.indexMapping = {
|
|
x: [],
|
|
y: []
|
|
};
|
|
for (i = 0; i < this.size.x; i++) {
|
|
this.indexMapping.x[i] = i;
|
|
this.indexMapping.x[i + this.size.x] = i;
|
|
}
|
|
for (i = 0; i < this.size.y; i++) {
|
|
this.indexMapping.y[i] = i;
|
|
this.indexMapping.y[i + this.size.y] = i;
|
|
}
|
|
}
|
|
return this.data[(this.indexMapping.y[y + this.size.y]) * this.size.x + this.indexMapping.x[x + this.size.x]];
|
|
};
|
|
|
|
/**
|
|
* Sets a given pixel position in the image
|
|
* @param x {Number} The x-position
|
|
* @param y {Number} The y-position
|
|
* @param value {Number} The grayscale value to set
|
|
* @returns {ImageWrapper} The Image itself (for possible chaining)
|
|
*/
|
|
ImageWrapper.prototype.set = function(x, y, value) {
|
|
this.data[y * this.size.x + x] = value;
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Sets the border of the image (1 pixel) to zero
|
|
*/
|
|
ImageWrapper.prototype.zeroBorder = function() {
|
|
var i, width = this.size.x, height = this.size.y, data = this.data;
|
|
for ( i = 0; i < width; i++) {
|
|
data[i] = data[(height - 1) * width + i] = 0;
|
|
}
|
|
for ( i = 1; i < height - 1; i++) {
|
|
data[i * width] = data[i * width + (width - 1)] = 0;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Inverts a binary image in place
|
|
*/
|
|
ImageWrapper.prototype.invert = function() {
|
|
var data = this.data, length = data.length;
|
|
|
|
while (length--) {
|
|
data[length] = data[length] ? 0 : 1;
|
|
}
|
|
};
|
|
|
|
ImageWrapper.prototype.convolve = function(kernel) {
|
|
var x, y, kx, ky, kSize = (kernel.length / 2) | 0, accu = 0;
|
|
for ( y = 0; y < this.size.y; y++) {
|
|
for ( x = 0; x < this.size.x; x++) {
|
|
accu = 0;
|
|
for ( ky = -kSize; ky <= kSize; ky++) {
|
|
for ( kx = -kSize; kx <= kSize; kx++) {
|
|
accu += kernel[ky + kSize][kx + kSize] * this.getSafe(x + kx, y + ky);
|
|
}
|
|
}
|
|
this.data[y * this.size.x + x] = accu;
|
|
}
|
|
}
|
|
};
|
|
|
|
ImageWrapper.prototype.moments = function(labelcount) {
|
|
var data = this.data,
|
|
x,
|
|
y,
|
|
height = this.size.y,
|
|
width = this.size.x,
|
|
val,
|
|
ysq,
|
|
labelsum = [],
|
|
i,
|
|
label,
|
|
mu11,
|
|
mu02,
|
|
mu20,
|
|
x_,
|
|
y_,
|
|
tmp,
|
|
result = [],
|
|
PI = Math.PI,
|
|
PI_4 = PI / 4;
|
|
|
|
if (labelcount <= 0) {
|
|
return result;
|
|
}
|
|
|
|
for ( i = 0; i < labelcount; i++) {
|
|
labelsum[i] = {
|
|
m00: 0,
|
|
m01: 0,
|
|
m10: 0,
|
|
m11: 0,
|
|
m02: 0,
|
|
m20: 0,
|
|
theta: 0,
|
|
rad: 0
|
|
};
|
|
}
|
|
|
|
for ( y = 0; y < height; y++) {
|
|
ysq = y * y;
|
|
for ( x = 0; x < width; x++) {
|
|
val = data[y * width + x];
|
|
if (val > 0) {
|
|
label = labelsum[val - 1];
|
|
label.m00 += 1;
|
|
label.m01 += y;
|
|
label.m10 += x;
|
|
label.m11 += x * y;
|
|
label.m02 += ysq;
|
|
label.m20 += x * x;
|
|
}
|
|
}
|
|
}
|
|
|
|
for ( i = 0; i < labelcount; i++) {
|
|
label = labelsum[i];
|
|
if (!isNaN(label.m00) && label.m00 !== 0) {
|
|
x_ = label.m10 / label.m00;
|
|
y_ = label.m01 / label.m00;
|
|
mu11 = label.m11 / label.m00 - x_ * y_;
|
|
mu02 = label.m02 / label.m00 - y_ * y_;
|
|
mu20 = label.m20 / label.m00 - x_ * x_;
|
|
tmp = (mu02 - mu20) / (2 * mu11);
|
|
tmp = 0.5 * Math.atan(tmp) + (mu11 >= 0 ? PI_4 : -PI_4 ) + PI;
|
|
label.theta = (tmp * 180 / PI + 90) % 180 - 90;
|
|
if (label.theta < 0) {
|
|
label.theta += 180;
|
|
}
|
|
label.rad = tmp > PI ? tmp - PI : tmp;
|
|
label.vec = vec2.clone([Math.cos(tmp), Math.sin(tmp)]);
|
|
result.push(label);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Displays the {ImageWrapper} in a given canvas
|
|
* @param canvas {Canvas} The canvas element to write to
|
|
* @param scale {Number} Scale which is applied to each pixel-value
|
|
*/
|
|
ImageWrapper.prototype.show = function(canvas, scale) {
|
|
var ctx,
|
|
frame,
|
|
data,
|
|
current,
|
|
pixel,
|
|
x,
|
|
y;
|
|
|
|
if (!scale) {
|
|
scale = 1.0;
|
|
}
|
|
ctx = canvas.getContext('2d');
|
|
canvas.width = this.size.x;
|
|
canvas.height = this.size.y;
|
|
frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
data = frame.data;
|
|
current = 0;
|
|
for (y = 0; y < this.size.y; y++) {
|
|
for (x = 0; x < this.size.x; x++) {
|
|
pixel = y * this.size.x + x;
|
|
current = this.get(x, y) * scale;
|
|
data[pixel * 4 + 0] = current;
|
|
data[pixel * 4 + 1] = current;
|
|
data[pixel * 4 + 2] = current;
|
|
data[pixel * 4 + 3] = 255;
|
|
}
|
|
}
|
|
//frame.data = data;
|
|
ctx.putImageData(frame, 0, 0);
|
|
};
|
|
|
|
/**
|
|
* Displays the {SubImage} in a given canvas
|
|
* @param canvas {Canvas} The canvas element to write to
|
|
* @param scale {Number} Scale which is applied to each pixel-value
|
|
*/
|
|
ImageWrapper.prototype.overlay = function(canvas, scale, from) {
|
|
if (!scale || scale < 0 || scale > 360) {
|
|
scale = 360;
|
|
}
|
|
var hsv = [0, 1, 1];
|
|
var rgb = [0, 0, 0];
|
|
var whiteRgb = [255, 255, 255];
|
|
var blackRgb = [0, 0, 0];
|
|
var result = [];
|
|
var ctx = canvas.getContext('2d');
|
|
var frame = ctx.getImageData(from.x, from.y, this.size.x, this.size.y);
|
|
var data = frame.data;
|
|
var length = this.data.length;
|
|
while (length--) {
|
|
hsv[0] = this.data[length] * scale;
|
|
result = hsv[0] <= 0 ? whiteRgb : hsv[0] >= 360 ? blackRgb : hsv2rgb(hsv, rgb);
|
|
data[length * 4 + 0] = result[0];
|
|
data[length * 4 + 1] = result[1];
|
|
data[length * 4 + 2] = result[2];
|
|
data[length * 4 + 3] = 255;
|
|
}
|
|
ctx.putImageData(frame, from.x, from.y);
|
|
};
|
|
|
|
export default ImageWrapper;
|