oxjs/source/Ox.Image/Ox.Image.js
2012-05-22 16:29:37 +02:00

797 lines
29 KiB
JavaScript

'use strict';
Ox.load.Image = function(options, callback) {
//@ Image ------------------------------------------------------------------
/*@
Ox.Image <f> Generic image object
To render the image as an image element, use its <code>src()</code>
method, to render it as a canvas, use its <code>canvas</code> property.
(src, callback) -> <u> undefined
(width, height, callback) -> <u> undefined
(width, height, background, callback) -> <u> undefined
src <s> Image source (local, remote or data URL)
width <n> Width in px
image <n> Height in px
background <[n]> Background color (RGB or RGBA)
@*/
Ox.Image = function() {
var self = {},
that = {};
self.callback = arguments[arguments.length - 1];
if (arguments.length == 2) {
self.src = arguments[0];
self.image = new Image();
self.image.onload = init;
self.image.src = self.src;
} else {
self.width = arguments[0];
self.height = arguments[1];
self.background = arguments.length == 4
? arguments[2] : [0, 0, 0, 0];
init();
}
function error(mode) {
throw new RangeError('PNG codec can\'t ' + mode + ' ' + (
mode == 'encode' ? 'data' : 'image'
));
}
function getCapacity(bpb) {
var capacity = 0;
that.forEach(function(rgba) {
capacity += rgba[3] == 255 ? bpb * 3/8 : 0;
});
return capacity;
}
function getIndex(xy) {
return (
Ox.mod(xy[0], self.width)
+ Ox.mod(xy[1] * self.width, self.width * self.height)
) * 4;
}
function getXY(index) {
index /= 4;
return [index % self.width, Math.floor(index / self.width)];
}
function init() {
if (self.image) {
self.width = self.image.width;
self.height = self.image.height;
}
that.canvas = Ox.$('<canvas>').attr({
width: self.width,
height: self.height
});
that.context = that.canvas[0].getContext('2d');
if (self.image) {
that.context.drawImage(self.image, 0, 0);
} else if (Ox.sum(self.background)) {
that.context.fillStyle(self.background);
that.context.fillRect(0, 0, self.width, self.height);
}
self.imageData = that.context.getImageData(
0, 0, self.width, self.height
);
self.data = self.imageData.data;
self.callback(that);
}
function parseDrawOptions(options) {
options = options || {};
that.context.strokeStyle = options.width === 0
? 'rgba(0, 0, 0, 0)' : options.color || 'rgb(0, 0, 0)';
that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)';
that.context.lineWidthWidth = options.width !== void 0
? options.width : 1;
}
function setSL(sl, d) {
var c = sl == 's' ? 1 : 2;
return that.map(function(rgba) {
var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb;
hsl[c] = d < 0 ? hsl[c] * (d + 1) : hsl[c] + (1 - hsl[c]) * d;
rgb = Ox.rgb(hsl);
return Ox.merge(rgb, rgba[3]);
});
}
/*@
blur <f> Apply blur filter
(val) -> <o> The image object
val <n> Amount of blur (1 to 5, more is slow)
@*/
that.blur = function(val) {
var filter = [],
size = val * 2 + 1,
sum = 0
Ox.loop(size, function(x) {
Ox.loop(size, function(y) {
var isInCircle = +(Math.sqrt(
Math.pow(x - val, 2) + Math.pow(y - val, 2)
) <= val);
sum += isInCircle;
filter.push(isInCircle)
});
});
filter = filter.map(function(val) {
return val / sum;
});
return that.filter(filter);
};
/*@
channel <f> Reduce the image to one channel
(channel) -> <o> The image object
channel <str> 'r', 'g', 'b', 'a', 'h', 's' or 'l'
@*/
that.channel = function(str) {
str = str[0].toLowerCase();
return that.map(function(rgba) {
var i = ['r', 'g', 'b', 'a'].indexOf(str), rgb, val;
if (i > -1) {
return Ox.map(rgba, function(v, c) {
return str == 'a'
? (c < 3 ? rgba[3] : 255)
: (c == i || c == 3 ? v : 0);
});
} else {
i = ['h', 's', 'l'].indexOf(str);
val = Ox.hsl([rgba[0], rgba[1], rgba[2]])[i];
rgb = i == 0
? Ox.rgb([val, 1, 0.5])
: Ox.range(3).map(function() {
return parseInt(val * 255);
});
return Ox.merge(rgb, rgba[3]);
}
});
}
//@ context <o> 2D drawing context
/*@
contour <f> Apply contour filter
() -> <o> The image object
@*/
that.contour = function(val) {
return that.filter([
+1, +1, +1,
+1, -7, +1,
+1, +1, +1
]);
};
/*@
depth <f> Reduce the bit depth
(depth) -> <o> The image object
depth <n> Bits per channel (1 to 7)
@*/
that.depth = function(val) {
var pow = Math.pow(2, 8 - val);
return that.map(function(rgba) {
return rgba.map(function(v, i) {
return i < 3 ? Math.floor(v / pow) * pow/* * 255 / val*/ : v;
});
});
};
/*@
drawCircle <f> Draws a circle
(point, radius, options) -> <o> The image object
point <[n]> Center (<code>[x, y]</code>)
radius <n> Radius in px
options <o> Options
color <s|'rgb(0, 0, 0)'> CSS color
fill <s|'rgba(0, 0, 0, 0)'> CSS color
width <n|1> Line width in px
@*/
that.drawCircle = function(point, radius, options) {
parseDrawOptions(options);
that.context.beginPath();
that.context.arc(point[0], point[1], radius, 0, 2 * Math.PI);
that.context.fill();
that.context.stroke();
return that;
};
/*@
drawLine <f> Draws a line
(points, options) -> <o> The image object
points <[a]> End points (<code>[[x1, y1], [x2, y2]]</code>)
options <o> Options
color <s|'rgb(0, 0, 0)'> CSS color
width <n|1> Line width in px
@*/
that.drawLine = function(points, options, isPath) {
parseDrawOptions(options);
!isPath && that.context.beginPath();
!isPath && that.context.moveTo(points[0][0], points[0][1]);
that.context.lineTo(points[1][0], points[1][1]);
!isPath && that.context.stroke();
return that;
};
/*@
drawPath <f> Draws a path
(points, options) -> <o> The image object
points <[a]> Points (<code>[[x1, y2], [x2, y2], ...]</code>)
options <o> Options
color <s|'rgb(0, 0, 0)'> CSS color
fill <s|'rgba(0, 0, 0, 0)'> CSS color
width <n|1> Line width in px
@*/
that.drawPath = function(points, options) {
var n = points.length;
parseDrawOptions(options);
that.context.beginPath();
that.context.moveTo(points[0][0], points[0][1]);
Ox.loop(options.close ? n : n - 1, function(i) {
that.drawLine([points[i], points[(i + 1) % n]], options, true);
});
that.context.fill();
that.context.stroke();
return that;
};
/*@
drawRectangle <f> Draws a rectangle
(point, size, options) -> <o> The image object
point <[n]> Top left corner (<code>[x, y]</code>)
size <[n]> Width and height in px (<code>[w, h]</code>)
options <o> Options
color <s|'rgb(0, 0, 0)'> CSS color
fill <s|'rgba(0, 0, 0, 0)'> CSS color
width <n|1> Line width in px
@*/
that.drawRectangle = function(point, size, options) {
parseDrawOptions(options);
that.context.fillRect(point[0], point[1], size[0], size[1]);
that.context.strokeRect(point[0], point[1], size[0], size[1]);
return that;
};
/*@
drawText <f> Draws text
(text, point, options) -> <o> The image object
text <s> Text
point <[n]> Top left corner (<code>[x, y]</code>)
options <o> Options
color <s|'rgb(0, 0, 0)'> CSS color
font <s|'10px sans-serif'> CSS font
outline <s|'0px rgba(0, 0, 0, 0)'> CSS border
textAlign <n|'start'> CSS text-align
@*/
that.drawText = function(text, point, options) {
options = options || {};
var match = (
options.outline || '0px rgba(0, 0, 0, 0)'
).match(/^([\d\.]+)px (.+)$/),
outlineWidth = match[1],
outlineColor = match[2];
that.context.fillStyle = options.color || 'rgb(0, 0, 0)';
that.context.font = options.font || '10px sans-serif';
that.context.strokeStyle = outlineColor;
that.context.lineWidth = outlineWidth;
that.context.textAlign = options.textAlign || 'start';
that.context.fillText(text, point[0], point[1])
that.context.strokeText(text, point[0], point[1])
return that;
};
/*@
edges <f> Apply edges filter
() -> <o> The image object
@*/
that.edges = function(val) {
return that.filter([
-1, -1, -1,
-1, +8, -1,
-1, -1, -1
]).saturation(-1);
};
/*@
emboss <f> Apply emboss filter
() -> <o> The image object
@*/
that.emboss = function(val) {
return that.filter([
-1, -1, 0,
-1, 0, +1,
0, +1, +1
], 128).saturation(-1);
};
/*@
encode <f> Encodes a string into the image
For most purposes, deflate and mode should be omitted, since the
defaults make the existence of the message harder to detect. A valid
use case for deflate and mode would be to first encode a more easily
detected decoy string, and only then the secret string: <code>
image.encode(decoy, false, 1, function(image) { image.encode(secret,
-1, callback); })</code>.
(str, callback) -> <o> The image object (unmodified)
(str, deflate, callback) -> <o> The image object (unmodified)
(str, mode, callback) -> <o> The image object (unmodified)
(str, deflate, mode, callback) -> <o> The image object (unmodified)
(str, mode, deflate, callback) -> <o> The image object (unmodified)
str <s> The string to be encoded
callback <f> Callback function
image <o> The image object (modified)
deflate <b|true> If true, encode the string with deflate
mode <n|0> Encoding mode
If mode is between -7 and 0, the string will be encoded one bit
per byte, as the number of bits within that byte set to 1,
modulo 2, by flipping, if necessary, the most (mode -7) to least
(mode 0) significant bit. If mode is between 1 and 255, the
string will be encoded bitwise into all bits per byte that, in
mode, are set to 1.
@*/
that.encode = function(str) {
var callback = arguments[arguments.length - 1],
deflate = Ox.isBoolean(arguments[1]) ? arguments[1]
: Ox.isBoolean(arguments[2]) ? arguments[2] : true,
mode = Ox.isNumber(arguments[1]) ? arguments[1]
: Ox.isNumber(arguments[2]) ? arguments[2] : 0,
b = 0, bin,
// Array of bits per byte to be modified (0 is LSB)
bits = mode < 1 ? [-mode] : Ox.filter(Ox.range(8), function(i) {
return mode & 1 << i;
};
cap = getCapacity(bits.length), len;
// Compress the string
str = Ox[deflate ? 'encodeDeflate' : 'encodeUTF8'](str);
len = str.length;
// Prefix the string with its length, as a four-byte value
str = Ox.pad(Ox.encodeBase256(len), 4, '\u0000') + str;
str.length > cap && error('encode');
while (str.length < cap) {
str += str.substr(4, len);
}
str = str.substr(0, Math.ceil(cap));
// Create an array of bit values
bin = Ox.flatten(Ox.map(str, function(chr) {
return Ox.range(8).map(function(i) {
return chr.charCodeAt(0) >> 7 - i & 1;
});
}));
b = 0;
that.forEach(function(rgba, xy, index) {
// If alpha is not 255, the RGB values may not be preserved
if (rgba[3] == 255) {
Ox.loop(3, function(c) {
// fixme: use: var data = that.context.imageData.data[i + c]
var i = index + c;
Ox.forEach(bits, function(bit) {
if ((
mode < 1
// If the number of bits set to 1, mod 2
? Ox.sum(Ox.range(8).map(function(bit) {
return +!!(self.data[i] & 1 << bit);
})) % 2
// or the one bit in question
: +!!(self.data[i] & 1 << bit)
// is not equal to the data bit
) != bin[b++]) {
// then flip the bit
self.data[i] ^= 1 << bit;
}
});
});
}
}, function() {
that.context.putImageData(self.imageData, 0, 0);
callback(that);
});
return that;
};
/*@
decode <f> Decode encoded string
(callback) -> <o> The image object (unmodified)
(deflate, callback) -> <o> The image object (unmodified)
(mode, callback) -> <o> The image object (unmodified)
(deflate, mode, callback) -> <o> The image object (unmodified)
(mode, deflate, callback) -> <o> The image object (unmodified)
deflate <b|true> If true, decode the string with deflate
mode <n|0> See encode method
callback <f> Callback function
image <o> The image object (modified)
@*/
that.decode = function() {
var callback = arguments[arguments.length - 1],
deflate = Ox.isBoolean(arguments[0]) ? arguments[0]
: Ox.isBoolean(arguments[1]) ? arguments[1] : true,
mode = Ox.isNumber(arguments[0]) ? arguments[0]
: Ox.isNumber(arguments[1]) ? arguments[1] : 0,
bin = '',
// Array of bits per byte to be modified (0 is LSB)
bits = mode < 1 ? [-mode] : Ox.range(8).filter(function(i) {
return mode & 1 << i;
}),
done = 0, len = 4, str = '';
that.forEach(function(rgba, xy, index) {
if (rgba[3] == 255) {
Ox.loop(3, function(c) {
var i = index + c;
Ox.forEach(bits, function(bit) {
bin += mode < 1
// Read the number of bits set to 1, mod 2
? Ox.sum(Ox.range(8).map(function(bit) {
return +!!(self.data[i] & 1 << bit);
})) % 2
// or the one bit in question
: +!!(self.data[i] & 1 << bit);
if (bin.length == 8) {
// Every 8 bits, add one byte to the string
str += Ox.char(parseInt(bin, 2));
bin = '';
if (str.length == len) {
if (++done == 1) {
// After 4 bytes, parse string as length
len = Ox.decodeBase256(str);
if (
len <= 0 ||
len > getCapacity(bits.length) - 4
) {
error('decode');
}
str = '';
} else {
// After length more bytes, break
Ox.break();
}
}
}
});
done == 2 && Ox.break();
});
done == 2 && Ox.break();
}
}, function() {
try {
if (deflate) {
Ox.decodeDeflate(str, callback);
} else {
callback(Ox.decodeUTF8(str));
}
} catch (e) {
error('decode');
}
});
return that;
}
/*@
filter <f> Pixel-wise filter function
Undocumented, see source code
(filter) -> <o> The image object
(filter, bias) -> <o> The image object
filter <[n]> Filter matrix
bias <n> Bias
@*/
that.filter = function(filter, bias) {
bias = bias || 0;
var filterSize = Math.sqrt(filter.length),
d = (filterSize - 1) / 2,
imageData = that.context.createImageData(self.width, self.height),
data = [];
self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = self.imageData.data;
Ox.loop(0, self.data.length, 4, function(i) {
var filterIndex = 0,
xy = getXY(i);
Ox.loop(3, function(c) {
data[i + c] = 0;
});
Ox.loop(-d, d + 1, function(x) {
Ox.loop(-d, d + 1, function(y) {
var pixelIndex = getIndex([xy[0] + x, xy[1] + y]);
Ox.loop(3, function(c) {
data[i + c] += self.data[pixelIndex + c] * filter[filterIndex];
});
filterIndex++;
});
});
});
Ox.loop(0, self.data.length, 4, function(i) {
Ox.loop(4, function(c) {
imageData.data[i + c] = c < 3
? Ox.limit(Math.round(data[i + c] + bias), 0, 255)
: self.data[i + c];
});
});
that.context.putImageData(imageData, 0, 0);
self.imageData = imageData;
self.data = data;
return that;
};
/*@
forEach <f> Pixel-wise forEach loop
(fn) -> <o> The image object
(fn, callback) -> <o> The image object
fn <f> Iterator function
rgba <[n]> RGBA values
xy <[n]> XY coordinates
i <n> Pixel index
callback <f> Callback function (if present, forEach is async)
@*/
that.forEach = function(fn, callback) {
var data = self.data;
Ox._loop(0, data.length, 4, function(i) {
return fn([
data[i], data[i + 1], data[i + 2], data[i + 3]
], getXY(i), i);
}, 10000, callback);
return that;
};
/*@
getSize <f> Returns width and height
() -> <o> Image size
width <n> Width in px
height <n> Height in px
@*/
that.getSize = function() {
return {width: self.width, height: self.height};
};
/*@
hue <f> Change the hue of the image
(val) -> <o> The image object
val <n> Hue, in degrees
@*/
that.hue = function(val) {
return that.map(function(rgba) {
var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb;
hsl[0] = (hsl[0] + val) % 360;
rgb = Ox.rgb(hsl);
return Ox.merge(rgb, rgba[3]);
});
};
/*@
imageData <f> Get or set image data
() -> <o> ImageData object
data <a> CanvasPixelArray
height <n> Height in px
width <n> Width in px
(imageData) -> <o> Image object with new image data
imageData <o> ImageData object
@*/
that.imageData = function() {
if (arguments.length == 0) {
return self.imageData;
} else {
self.imageData = self.context.createImageData(arguments[0]);
}
};
/*@
invert <f> Apply invert filter
() -> <o> The image object
@*/
that.invert = function() {
return that.map(function(rgba) {
return [255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3]];
});
};
/*@
lightness <f> Apply lightness filter
(val) -> <o> The image object
val <n> Amount, from -1 (darkest) to 1 (lightest)
@*/
that.lightness = function(val) {
return setSL('l', val);
};
/*@
map <f> Pixel-wise map function
(fn) -> <o> The image object
fn <f> Iterator function
rgba <[n]> RGBA values
xy <[n]> XY coordinates
i <n> Pixel index
@*/
that.map = function(fn, callback) {
self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = self.imageData.data;
that.forEach(function(rgba, xy, i) {
fn(rgba, xy, i).forEach(function(val, c) {
self.data[i + c] = val;
});
});
that.context.putImageData(self.imageData, 0, 0);
return that;
};
/*@
mosaic <f> Apply mosaic filter
(size) -> <o> The image object
size <n> Mosaic size
@*/
that.mosaic = function(size) {
that.forEach(function(rgba, xy) {
if (xy[0] % size == 0 && xy[1] % size == 0) {
Ox.loop(size, function(x) {
Ox.loop(size, function(y) {
var hsl, rgb, xy_ = [xy[0] + x, xy[1] + y];
if (
(x == 0 || y == 0)
&& !(x == size - 1 || y == size - 1)
) {
that.pixel(xy_, rgba.map(function(c, i) {
return i < 3 ? Math.min(c + 16, 255) : c;
}));
} else if (
(x == size - 1 || y == size - 1)
&& !(x == 0 || y == 0)
) {
that.pixel(xy_, rgba.map(function(c, i) {
return i < 3 ? Math.max(c - 16, 0) : c;
}));
} else {
that.pixel(xy_, rgba);
}
});
});
}
});
that.context.putImageData(self.imageData, 0, 0);
return that;
}
/*@
motionBlur <f> Apply motion blur filter
() -> <o> The image object
@*/
that.motionBlur = function() {
return that.filter([
0.2, 0.0, 0.0, 0.0, 0.0,
0.0, 0.2, 0.0, 0.0, 0.0,
0.0, 0.0, 0.2, 0.0, 0.0,
0.0, 0.0, 0.0, 0.2, 0.0,
0.0, 0.0, 0.0, 0.0, 0.2
]);
};
/*@
photocopy <f> Apply photocopy filter
() -> <o> The image object
@*/
that.photocopy = function(val) {
return that.saturation(-1).depth(1).blur(1);
};
/*@
pixel <f> Get or set pixel values
(x, y) -> <[n]> RGBA values
(x, y, val) -> <o> The image object
x <n> X coordinate
y <n> Y coordinate
val <[n]> RGBA values
@*/
that.pixel = function(xy, val) {
var i = getIndex(xy), ret;
if (!val) {
ret = Ox.range(4).map(function(c) {
return self.data[i + c];
});
} else {
val.forEach(function(v, c) {
self.data[i + c] = v;
});
that.context.putImageData(self.imageData, 0, 0);
ret = that;
}
return ret;
}
/*@
posterize <f> Apply posterize filter
() -> <o> The image object
@*/
that.posterize = function() {
return that.blur(3).map(function(rgba) {
return [
Math.floor(rgba[0] / 64) * 64,
Math.floor(rgba[1] / 64) * 64,
Math.floor(rgba[2] / 64) * 64,
rgba[3]
];
});
};
that.resize = function(width, height) {
// fixme: doesn't work this way
that.canvas.attr({
width: width,
height: height
});
return that;
}
/*@
saturation <f> Apply saturation filter
(val) -> <o> The image object
val <n> Amount, from -1 (lowest) to 1 (highest)
@*/
that.saturation = function(val) {
return setSL('s', val);
};
/*@
sharpen <f> Apply sharpen filter
() -> <o> The image object
@*/
that.sharpen = function(val) {
return that.filter([
-1, -1, -1,
-1, +9, -1,
-1, -1, -1
]);
};
/*@
solarize <f> Apply solarize filter
() -> <o> The image object
@*/
that.solarize = function() {
return that.map(function(rgba) {
return [
rgba[0] < 128 ? rgba[0] : 255 - rgba[0],
rgba[1] < 128 ? rgba[1] : 255 - rgba[1],
rgba[2] < 128 ? rgba[2] : 255 - rgba[2],
rgba[3]
];
});
}
/*@
src <f> Get or set the image source
() -> <s> Data URL
(src) -> <o> Image object with new source
src <s> Image source (local, remote or data URL)
@*/
that.src = function() {
var ret;
if (arguments.length == 0) {
ret = that.canvas[0].toDataURL();
} else {
var callback = arguments[1];
self.src = arguments[0];
self.image = new Image();
self.image.onload = function() {
self.width = self.image.width;
self.height = self.image.height;
that.canvas.attr({
width: self.width,
height: self.height
});
that.context.drawImage(self.image, 0, 0);
self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = self.imageData.data;
callback && callback(that);
}
self.image.src = self.src;
ret = that;
}
return ret;
};
};
callback(true);
}