1. clockmaker

    Posted

    clockmaker
Changes in title
+HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,57 @@
+# canvas 要素の画像ファイル化
+
+HTML5 の canvas 要素は画像として保存することができます。
+
+デモを jsdo.it に投稿したので、合わせてご覧ください。
+
+- [Save as Image File - Colorful Lines - jsdo.it](http://jsdo.it/clockmaker/save-as-image-file)
+
+
+## JPEG 画像へ変換する方法
+
+`canvas`変数は、`document.getElementById("ほげほげ")`で取得した`canvas`要素の参照です。`toDataURL()`メソッドの引数に変換したい種別を指定することで、その画像形式に対応した文字列(Base64方式の画像)を戻り値として受け取れます。
+
+```js
+var data = canvas.toDataURL("image/jpeg");
+```
+
+JPEG 画像は背景色を透過できませんので用途が限られるでしょう。
+
+## PNG 画像へ変換する方法
+
+PNG 形式であれば、背景色を透過して保存できます。可逆圧縮となるので画質の劣化もありません。
+
+```js
+var data = canvas.toDataURL("image/png");
+```
+
+
+
+
+## WebP 画像へ変換する方法
+
+Google Chrome 限定ですが WebP 形式(ウェブピーではなく、**ウェッピー**と読みます)の保存にも対応しています。WebP は新しい画像形式だけあって、JPEGやPNGと比べても容量が小さくなります。ただし、二番目の引数で画質調整をうまくしてやらないと画質がすぐに劣化するので注意が必要です。WebP 形式でも、背景色を透過して保存できます。
+
+```js
+var data = canvas.toDataURL("image/webp");
+```
+
+
+
+
+
+## 番外編 : SVG
+
+SVG 画像にも対応していたら面白いと思ったのですが、残念ながら現状はどのブラウザも対応していないようです。
+
+```js
+var data = canvas.toDataURL("image/svg+xml");
+```
+
+ただし、[CreateJS](http://createjs.com)の機能「[EaselJS/extras/SVGExporter at master · CreateJS/EaselJS](https://github.com/CreateJS/EaselJS/tree/master/extras/SVGExporter)」を使えば、Canvas要素をSVG画像として保存することができます。CreateJSすごい!
+
+---
+
+今回はプレーンな JS で制御しましたが、HTML5 Canvas を制御するなら[CreateJS](http://createjs.com)がオススメです。日本語の[CreateJS入門サイト](https://ics.media/tutorial-createjs/index.html)を用意していますので、あわせて参照くださいませ。
+
+