オシャレアルゴリズム

Readme
JavaScript 191 lines
HTML 22 lines
CSS 29 lines

オシャレアルゴリズム

window.addEventListener('DOMContentLoaded', function() {
  var style = document.createElement('style');
  var styleSheet;

document.head.appendChild(style);

// run
  document.getElementById('file').addEventListener('change', function(ev) {
    ev.preventDefault();

if (document.getElementById('file').files.length < 1) {
      return;
    }

var fileReader = new FileReader();
    fileReader.onloadend = function() {
      run(fileReader.result);
    };
    fileReader.readAsDataURL(document.getElementById('file').files[0]);

return false;
  }, false);

function run(url) {
    var img = document.getElementById('target');
    img.addEventListener('load', function() {
      var fladdict = window.fladdict = new Fladdict(img);

fladdict.process();

// update stylesheet
      document.body.style.backgroundColor = "rgb(" + fladdict.backgroundColor.join(',') + ')';
      shadow = img.width * 0.1;
      styleSheet = style.sheet;
      styleSheet.insertRule('ol li { color: rgb(' + fladdict.textColor[0].join(',') +  '); }', styleSheet.rules.length);
      styleSheet.insertRule('ol li > span { color: rgb(' + fladdict.textColor[1].join(',') +  '); }', styleSheet.rules.length);
      styleSheet.insertRule('#container{ display: inline-block; }', styleSheet.rules.length);
      styleSheet.insertRule('#container::before { box-shadow: inset 0 0 ' + shadow + 'px ' + shadow + 'px rgb(' + fladdict.backgroundColor.join(',') +  '); }', styleSheet.rules.length);
    }, false);
    img.src = url;
  }
}, false);

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 edge = this.edgeColor;
  var color = Array.prototype.indexOf.call(edge, Math.max.apply(null, edge));

this.backgroundColor = Fladdict.int2rgb(color);
  console.log(this.backgroundColor);
};

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 text = this.textColor;

Array.prototype.forEach.call(hist, function(v, color) {
    var rgb = Fladdict.int2rgb(color);
    var hsv;
    var sub;

// 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];
    if (
      Math.abs(sub > 180 ? sub - 360 : sub) < 120 ||
      Math.abs(hsv[2] - bghsv[2]) < 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 さんの分析した iTunes11 のアルバム情報表示アルゴリズムをとりあえず実装してみました。詳細は http://fladdict.net/blog/2012/11/itunes11_colorpicker.html で公開されています。 - 減色の色数は 512 色 - 減色アルゴリズムは 32 で割って小数部を切り捨て32を掛けて16を加算するだけの単純なもの - 文字色は背景色と色相の差が 120 以上のもの、かつ明度の差が96以上のもので出現回数の一番大きいもの - 動作確認は Google Chrome のみ実物を見ないで実装したので大きく異なっている可能性があります。全然違ったらゴメンナサイ。window.addEventListener('DOMContentLoaded', function() { var style = document.createElement('style'); var styleSheet; document.head.appendChild(style); // run document.getElementById('file').addEventListener('change', function(ev) { ev.preventDefault(); if (document.getElementById('file').files.length < 1) { return; } var fileReader = new FileReader(); fileReader.onloadend = function() { run(fileReader.result); }; fileReader.readAsDataURL(document.getElementById('file').files[0]); return false; }, false); function run(url) { var img = document.getElementById('target'); img.addEventListener('load', function() { var fladdict = window.fladdict = new Fladdict(img); fladdict.process(); // update stylesheet document.body.style.backgroundColor = "rgb(" + fladdict.backgroundColor.join(',') + ')'; shadow = img.width * 0.1; styleSheet = style.sheet; styleSheet.insertRule('ol li { color: rgb(' + fladdict.textColor[0].join(',') + '); }', styleSheet.rules.length); styleSheet.insertRule('ol li > span { color: rgb(' + fladdict.textColor[1].join(',') + '); }', styleSheet.rules.length); styleSheet.insertRule('#container{ display: inline-block; }', styleSheet.rules.length); styleSheet.insertRule('#container::before { box-shadow: inset 0 0 ' + shadow + 'px ' + shadow + 'px rgb(' + fladdict.backgroundColor.join(',') + '); }', styleSheet.rules.length); }, false); img.src = url; } }, false); 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 edge = this.edgeColor; var color = Array.prototype.indexOf.call(edge, Math.max.apply(null, edge)); this.backgroundColor = Fladdict.int2rgb(color); console.log(this.backgroundColor); }; 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 text = this.textColor; Array.prototype.forEach.call(hist, function(v, color) { var rgb = Fladdict.int2rgb(color); var hsv; var sub; // 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]; if ( Math.abs(sub > 180 ? sub - 360 : sub) < 120 || Math.abs(hsv[2] - bghsv[2]) < 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]; }; <table> <tr> <td> <ol> <li><span>Hoge</span></li> <li><span>Fuga</span></li> <li><span>Piyo</span></li> <li><span>Foo</span></li> <li><span>Bar</span></li> <li><span>Baz</span></li> </ol> </td> <td id="container"> <img id="target"/> </td> </tr> </table> <div id="controller"> <input id="file" type="file" accept="image/*"/> </div> #container > img { display: block; } #container { display: block; position: relative; } #container::before { display: block; position: absolute; width: 100%; height: 100%; content: ''; } body { padding-bottom: 2em; } #controller { position: fixed; left: 0; right: 0; bottom: 0; height: 2em; z-index: 1; background-color: white; opacity: 0.7; }