LoginSignup
38
33

More than 5 years have passed since last update.

Canvasの内容を画像ファイルとして保存させる

Last updated at Posted at 2014-05-31

タイトルにDartって入れてませんがDartです。いま生でJavaScriptを書くのは、Cが流行り始めてる時代に生アセンブルでフルスクラッチするようなものなので、みなさんDartしましょう!(という布教)

Canvasの内容を画像ファイルとして保存させるには、まずCanvasの内容をData URLスキームに変換します。

// id="canvas"のCanvasElementがHTMLドキュメントにあるとする
CanvasElement canvas = document.query('#canvas');
String dataUrl = canvas.toDataUrl();

toDataUrl()の引数を省略すると、デフォルトでPNG画像へのData URLスキームの文字列を返します。取得したURLは画像へのURLになるので、そのままそのURLへアクセスする形で画像の表示、またはダウンロードすることができます。

ユーザー任意でそのURLへアクセスさせる場合は、AnchorElement(aタグ)のhrefにそのURLを設定し、そのElementをドキュメントへ追加するという方法もあるのですが、今回はDart側からダウンロード自体を開始させてみます。

Qiitaのこちらの記事を参考にします。

javascriptで生成したファイルをローカルに保存する - Qiita

AnchorElement anchor = new AnchorElement()
  ..href = dataUrl
  ..download = 'image.png'
  ..dispatchEvent(new CustomEvent('click');

この流れでCanvasの内容を画像ファイルとしてダウンロードさせることができます。

ですが、自分の環境ですと、ダウンロードされるファイルのファイル名が「ダウンロード.png」になってしまいます。(Mac OS X 10.9, Chrome 35)原因誰か教えてプリーズ。

38
33
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
33