サイト内検索

toDataURL() メソッド(canvas を画像に変換)

canvas

canvasをPNGに変換してimg要素で表示

PNGに変換

data: url の中身


		

canvasをJPEGに変換してimg要素で表示

JPEGに変換

data: url の中身


		

コード

/* canvasに赤色の矩形を描画する */
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(20, 30, 60, 40);
/* canvasの描画結果をPNGで取り出しimg要素にセット */
try {
  var img_png_src = canvas.toDataURL();
  document.getElementById("image_png").src = img_png_src;
  document.getElementById("data_url_png").firstChild.nodeValue = img_png_src;
} catch(e) {
  document.getElementById("image_png").alt = "未対応";
}
/* canvasの描画結果をJPEGで取り出しimg要素にセット */
try {
  var img_jpeg_src = canvas.toDataURL("image/jpeg");
  document.getElementById("image_jpeg").src = img_jpeg_src;
  document.getElementById("data_url_jpeg").firstChild.nodeValue = img_jpeg_src;
} catch(e) {
  document.getElementById("image_jpeg").alt = "未対応";
}