イナヅマTVログ

Canvas始めました – キャプチャ画像を書出し

| 1件のコメント

Canvasをキャプチャして画像書出しするの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(50,30,250,100);
 
window.open(canvas.toDataURL(),
    "canvasOutput","left=0,top=0,
    width="+canvas.width+",height="+canvas.height+",
    toolbar=0,resizable=0");

toDataURL([data Type:String]):String
data TypeデフォルトはPNG, image/png

戻り値(Data URI形式)
data:image/png;base64,…

書出し画像タイプはPNGとJPEGが選択可能。
[PNG]
toDataURL() と toDataURL(‘image/png’) は等価。
[JPEG]
toDataURL(image/jpeg[, 圧縮率:float 0.0 ~ 1.0])
JPEG書出しのときは引数が2つ。
第2引数はオプション。

画像の書出しは驚くほど簡単。
Data URIのおかげ、ネイティブ実装ってステキ。

W3C
http://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html

1件のコメント

  1. ピンバック: Canvas始めました – 読込んだ画像の一部をキャプチャしてPNG書出し « イナヅマtvログ

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください