0xff.toBlog()

Faviconの色をcanvasで変える

github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。 画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。

元が の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var favicon=document.getElementsByTagName('img')[0];

var cv = document.createElement('canvas');
cv.width = 16;
cv.height = 16;
document.body.appendChild(cv);
var c = cv.getContext('2d');
c.drawImage(favicon, 0, 0, 16, 16);
var data = c.getImageData(0, 0, 16, 16);
var d = data.data;
for (var i = 0, len = d.length; i < len; i += 4 ) {
  d[i] = 255;
  d[i + 1] = 0;
  d[i + 2] = 0;
}
c.putImageData(data, 0, 0);

var a = document.createElement('a');
a.href = cv.toDataURL();
a.download = 'ge.png';
a.appendChild(cv);
document.body.appendChild(a);

うん、簡単だった。

ほぼ書き終えていた記事があったので、今更ながら公開…。

Comments