canvas

<canvas id="c1" width="100" height="100" class="target-img">

	

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

<img src="" alt="PNGに変換" width="100" height="100" id="image_png" class="target-img" />

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

<img src="" alt="JPEGに変換" width="100" height="100" id="image_jpeg" class="target-img" />

コード

/* 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 = "未対応";
}