JavaScript: canvasを使って画像をdata URIに変換
Firefox2、Opera9のみ。
Drawing text using a canvas - MDCとtoDataURLメゾッドを使えば、テキストを画像にすることができる。
LDRの未読数をfaviconに表示するGreasemonkeyスクリプト - 素人がプログラミングを勉強するブログ
nsIDOMHTMLCanvasElement#toDataURLなんてものがあるのか。
javascript:(function(){
var c = document.createElement("canvas"), img = document.images[0];
c.width = img.width;
c.height = img.height;
c.getContext("2d").drawImage(img, 0, 0);
prompt(img.src, c.toDataURL());
})();
data URIに変換（今開いている画像をdata URIにするブックマークレット）
こいつぁクールだ。
早速、例のfavicon取得に使えないかと思って、Execute JS上で
var c = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
c.width = c.height = 16;
c.getContext("2d").drawImage(window.gProxyFavIcon, 0, 0);
gBrowser.selectedTab = gBrowser.addTab(c.toDataURL());
とかやってみたら、2行目で
[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: chrome://executejs/content/executejs/executeJS.js :: EJS_evalStringOnTarget :: line 185" data: no]
エラー。
window.gProxyFavIconがXULImageElementなのが原因で、仕様的にHTMLImageElementしか受け付けてくれないみたい。
そりゃそうだ。何とかして偽装できないかな。
新しいimg要素のsrc属性にセットしたらURLにアクセスしてしまうから意味ない。
追記
var c = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
var fbo = window.gProxyFavIcon.boxObject;
c.getContext("2d").drawWindow(window, fbo.x, fbo.y, c.width = fbo.width, c.height = fbo.height, "rgb(255,255,255)");
gBrowser.selectedTab = gBrowser.addTab(c.toDataURL());
妥協すればこんな手もあるか。
透過色が失われるから全然使えないけど。
