canvas上の画像をPNGに変換する

こんばんは。きわさです。

前回、canvas上の画像を透過させる方法について書きました。
今回は、そのcanvas上の画像をPNGに変換する方法です。
これで通常の画像を透過PNGに変換することもできるようになります。

function test() {
    var canvas = document.getElementsByTagName("canvas")[0];
    var src = canvas.toDataURL();
    var img = document.getElementsByTagName("img")[0];
    img.src = src;
    return;
}

これはcanvas要素を取得し、データURLに変換してimgタグのsrcに入れています。
サンプルなので簡単に書きましたが、実際使う場合は getElementsByTagName とか使わずにid指定とかのほうが事故がなくて良いです。
また、img.srcに設定ではなくてダウンロードさせたりとかでも。

PNGへの変換は toDataURL() で行っています。
これは引数に”image/png”や”image/jpeg”といったタイプを指定できますが、
何も渡さない場合の初期値は”image/png”となっています。