Canvas でカルトゥーシュ・ジェネレータを作った

SVG で カルトゥーシュ・ジェネレータを作った - Scalaとlift　のはずだった　・・・

先日、SVG を利用したカルトューシュ・ジェネレータを作ったのですが、勉強がてら Canvas で同じ機能のものを作ってみました。

Cartouche Generator(Canvas版)

Canvas だと描いた画像を toDataURL() メソッドで PNG 画像に変換でき、jQuery 使うと以下のようの感じで簡単に画像として表示できます。

var img = $('<img>').attr('src', canvas.toDataURL('image/png'));
$('#paperBox').append(img);

画像にしてしまえば、あとは右クリックで保存ができるので、SVG版よりも保存が簡単になりました。ベクタ画像にこだわりが無ければ、Canvas の方が画像ジェネレータ向きかもしれません。

また、今回実験して初めて知ったのですが、Canvas を長押しすると iPhone/iPad でも画像の保存ができました。保存ができると、写真編集やDraw系のアプリで作った画像を保存して、それを他のアプリに貼りつけて・・・みたいなこともできるわけで、色々と可能性が広がりますね。