Created
January 15, 2013 08:53
-
-
Save imaya/4537322 to your computer and use it in GitHub Desktop.
輝度による文字色の除外を追加
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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