Skip to content

Instantly share code, notes, and snippets.

@imaya
Created January 15, 2013 08:53
Show Gist options
  • Save imaya/4537322 to your computer and use it in GitHub Desktop.
Save imaya/4537322 to your computer and use it in GitHub Desktop.
輝度による文字色の除外を追加
function Fladdict(img) {
this.image = img;
this.canvas;
this.context;
this.backgroundColor;
this.textColor = [];
this.edgeColor;
this.colorHistogram;
}
Fladdict.prototype.process = function() {
var image = this.image;
var canvas;
var context;
if (image instanceof HTMLImageElement) {
canvas = this.canvas = document.createElement('canvas');
context = this.context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
} else if (image instanceof HTMLCanvasElement) {
canvas = this.canvas = image;
this.context = canvas.getContext('2d');
}
this.processColorHistogram();
this.processBackgroundColor();
this.processTextColor();
this.processTextColor();
};
Fladdict.prototype.processColorHistogram = function() {
var canvas = this.canvas;
var context = this.context;
var width = canvas.width;
var height = canvas.height;
var imageData = context.getImageData(0, 0, width, height);
var pixelArray = imageData.data;
var hist = this.colorHistogram = new Uint32Array(512);
var edge = this.edgeColor = new Uint32Array(512);
var x;
var y;
var pos;
var color;
for (y = 0; y < height; ++y) {
for (x = 0; x < width; ++x) {
pos = (y * width + x) * 4;
// color reduction
color =
Fladdict.rgb2int(pixelArray[pos], pixelArray[pos+1], pixelArray[pos+2]);
hist[color]++;
// edge
if (x === 0 || x === width-1 || y === 0 || y === height-1) {
edge[color]++;
}
}
}
};
Fladdict.prototype.processBackgroundColor = function() {
var hist = this.colorHistogram;
var edge = this.edgeColor;
var color = 0;
var i, il;
for (i = 0, il = edge.length; i < il; ++i) {
if (edge[i] > 0 && hist[i] > hist[color]) {
color = i;
}
}
this.backgroundColor = Fladdict.int2rgb(color);
};
Fladdict.prototype.processTextColor = function() {
var max = -1;
var maxColor;
var hist = this.colorHistogram;
var bgrgb = this.backgroundColor;
var bgint = Fladdict.rgb2int(bgrgb);
var bghsv = Fladdict.rgb2hsv(bgrgb);
var bgy = Fladdict.rgb2y(bgrgb);
var text = this.textColor;
Array.prototype.forEach.call(hist, function(v, color) {
var rgb = Fladdict.int2rgb(color);
var hsv;
var sub;
var y;
// background color
if (color === bgint) {
return;
}
// text color
for (i = 0, il = text.length; i < il; ++i) {
if (color === Fladdict.rgb2int.apply(this, text[i])) {
return;
}
}
// color check
hsv = Fladdict.rgb2hsv(rgb);
sub = hsv[0] - bghsv[0];
y = Fladdict.rgb2y(rgb);
if (
Math.abs(sub > 180 ? sub - 360 : sub) < 120 ||
Math.abs(hsv[2] - bghsv[2]) < 96 ||
Math.abs(y - bgy) < 96
) {
return;
}
if (max < v) {
max = v;
maxColor = color;
}
});
text.push(Fladdict.int2rgb(maxColor));
};
Fladdict.rgb2int = function(red, green, blue) {
return (
((red >> 5) << 6) |
((green >> 5) << 3) |
((blue >> 5) << 0)
);
};
Fladdict.int2rgb = function(color) {
return [
((color >> 6 & 0x7) << 5) + 16,
((color >> 3 & 0x7) << 5) + 16,
((color >> 0 & 0x7) << 5) + 16
];
};
Fladdict.rgb2hsv = function(rgb) {
var max = Math.max.apply(null, rgb);
var min = Math.min.apply(null, rgb);
var hue =
max === rgb[0] ? 60 * (rgb[1] - rgb[2]) / (max - min) :
max === rgb[1] ? 60 * (rgb[2] - rgb[0]) / (max - min) + 120 :
/*max === rgb[2]*/ 60 * (rgb[0] - rgb[1]) / (max - min) + 240;
var saturation = (max - min) / max;
if (max === min) { hue = 0; }
if (max === 0) { saturation = 0; }
if (hue < 0) { hue += 360; }
return [hue, saturation, max];
};
Fladdict.rgb2y = function(rgb) {
return 0.298912 * rgb[0] + 0.586611 * rgb[1] + 0.114478 * rgb[2] + 0.5 | 0;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment