Public Domainのクリップアート配布サイト

先日、Public Domainの写真配布サイトを紹介しましたが、今回はPublic Domainのクリップアートを配布しているサイト紹介したいと思います。

Clipart – High Quality, Easy to Use, Free Support
http://openclipart.org/homepage

クリップアートの種類も非常に豊富で、SVG形式でも配布されているところが使いやすくて便利です。

fascists into the trash ukraine

fascists into the trash ukraine

Bulle / bubble

Bulle / bubble

Dp Bbm Cinta dan Kata Bijak Lucu

Dp Bbm Cinta dan Kata Bijak Lucu

SVGをPNGに変換するJavaScript

SVGをPNGに変換する手軽な方法を探していて、「canvg」という面白そうなスクリプトを見つけましたので紹介したいと思います。

canvgの使い方

canvgは名前からも想像できるかもしれませんが、SVGの画像を読み込んでcanvasに描くスクリプトです。

http://code.google.com/p/canvg/
http://code.google.com/p/canvg/

使い方はとてもシンプルですので、先にcanvgの使い方から説明したいと思います。

まずは必要なファイルを2つ読み込みます。

<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="canvg.js"></script>

後はソースとなるSVGと対象のcanvasを指定するだけです。

ファイルから読み込む場合

canvg('canvas', 'sample.svg');

直接読み込む場合

canvg('canvas', '<svg>...</svg>');

オプションを指定する場合は第3引き数に指定します。

canvg('canvas', 'sample.svg', { ignoreMouse: true });

canvasの画像をPNGファイルとして保存

後半はcanvasの画像をPNGファイルとして保存する方法を解説します。

var canvas = document.getElementById('canvas');
var dataurl = canvas.toDataURL('image/png');

toDataURLでRFC2397のdata URL スキームを得られますので、これで新しくウィンドウを開くなりファイルに保存するなりすればよいと思います。

最後に、SVGファイルからPNGファイルをダウンロードするサンプルです。
sample.svgというSVGファイルを読み込み、canvgを使ってPNGファイルを出力します。

http://code.rlated.net/canvg/
http://code.rlated.net/canvg/