How to Save Canvas as Png Image

Capture HTML Canvas as gif/jpg/png/pdf?

Original answer was specific to a similar question. This has been revised:

const canvas = document.getElementById('mycanvas')
const img    = canvas.toDataURL('image/png')

with the value in IMG you can write it out as a new Image like so:

document.getElementById('existing-image-id').src = img

document.write('<img src="'+img+'"/>');

How to save an HTML5 Canvas as an image on a server?

Here is an example of how to achieve what you need:

Draw something (taken from canvas tutorial)

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // begin custom shape
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

  // complete custom shape
  context.closePath();
  context.lineWidth = 5;
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.strokeStyle = 'blue';
  context.stroke();
</script>

Save a canvas image to disk

I finally found a solution! Node apparently supports canvas and allows for saving the image to filesystem via fs.

See here: https://www.youtube.com/watch?v=3c2EFpCr_vY

Save Canvas With A Custom File Name

You can follow this: http://eligrey.com/demos/FileSaver.js/

how to save canvas as png image?

How to Save Canvas as Png Image

Capture HTML Canvas as gif/jpg/png/pdf?

How to save an HTML5 Canvas as an image on a server?

Save a canvas image to disk

Save Canvas With A Custom File Name

Related Topics

Leave a reply