Google

2016年10月17日月曜日

Canvasを画像としてダウンロード

今回はCanvas画像のダウンロードについて少々。
記事自体が大したことない内容なのと、前回からのブログ記事の中身に連携や脈絡が無くてアレですが、何かの参考になればと。

まず手前味噌ですみませんが、うちの会社では以下のようなサイトを運営してまして、技術部分を私が担当してます。

ANGEWORKの西洋占星術
http://angework-astrology.com/

古くからあったサイトを去年末に全てHTML5リニューアルしたのですが、ホロスコープと呼ばれる画像をCanvasで描画するようになりました。

こんな画像とかをCanvasで描画してます。
Canvasは最近使用頻度が上がってきているようですが、HTMLやCSSをブラウザに合わせるテクニック同様、実際に組んでみると細かい部分で工夫が必要です。
一部スマホでタッチしてもスクロールできないとか、キャッシュが切れて画像が崩れるとか、どのフレームワーク使うかとか、もう言い出したら色々な感じです。

で、このホロスコープ画像はライセンス的に転載自由なんで好きにキャプチャして使っていただいていいんですが、大抵のブラウザでは右クリしてもダウンロードはできない(HTMLとして保存する動きをする)訳です。
で、キャプチャが面倒くさいと言われたため、横着案として画像でダウンロードするボタンを付けてしまうのが楽だろうという事になりました。
この右上のボタンです。
保存のための実現方法は色々とあるんですが、今後の拡張の関係で今はこうなってます。
では今回使ってるブツの一覧です。

  • JQuery-2.1.4
  • Canvas

フレームワークはソースを見れば一目瞭然、最近v4となったPIXI.jsを使っているのですがこの描画はまだ3な上に今回はお題と直接関係ないのでこちらも割愛します。

そして今回のソースコード。
$(document).ready(function()
{
$(".save_wheel").on('click',function()
{
var canvas = $("canvas")[0];
var img = canvas.toDataURL("image/png");
img = img.replace("image/png", "image/octet-stream");
window.open(img, 'save');
});
});
非常にシンブル過ぎて1件分の記事で良いのだろうかと迷った程です。
JQueryの開始イベントの中にある「save_wheel」というボタン押下イベントで処理をしています。
この辺の資料はどこにでもあるので割愛します。

まず第1のポイントはCanvasをJQueryでどう取得するかという点。
var canvas = $('canvas')[0];
「canvas」というセレクタで取得すると、配列になって取得できます。これはclassと同様、HTML内部に複数生成される可能性があるためこのように取得できます。
canvasタグのIDにcanvasと付ける方法でも良いのですが、フレームワークの種類によっては自動的にCanvasタグが生成されてしまったりしてIDセレクタがやりづらかったりするため、どの道こういった形でアクセスしなければなりません。
このページではCanvasの1個目がホロスコープなので[0]で取得しています。

続いて画像変換。
取得したCanvasをpng形式に変換します。
var img= canvas.toDataURL('image/png');
この内部ではbase64で変換しています。
そしてブラウザに保存形式として扱うためにストリーム形式に変換。
mg = img.replace("image/png", "image/octet-stream");
最後に名前を付けて保存。
window.open(img, 'save');
これを実行すると、おなじみの画像保存ダイアログが表示されます。


ちなみにストリームに変換しない場合、FireFox等では別のブラウザタブ等で画像が単体で表示されます。

凄まじく長いアドレスになってます。
用途や目的に合わせて変更すると良いでしょう。
簡単ですみませんが今回はこんなところで。

0 件のコメント:

コメントを投稿