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
ピンバック: Canvas始めました – 読込んだ画像の一部をキャプチャしてPNG書出し « イナヅマtvログ