こんばんは。きわさです。
前回、canvas上の画像を透過させる方法について書きました。
今回は、そのcanvas上の画像をPNGに変換する方法です。
これで通常の画像を透過PNGに変換することもできるようになります。
1 2 3 4 5 6 7 | 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”となっています。