2

How to save canvas as an image in html5(using javascript)? I want to create a button such that user can save canvas in html5 as image.

Debu
  • 49
  • 1
  • 1
  • 5
  • possible duplicate of [Capture HTML Canvas as gif/jpg/png/pdf?](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) – Simon Arnold Nov 13 '14 at 14:31
  • possible duplicate of [How To Save Canvas As An Image With canvas.toDataURL()?](http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl) – daker Nov 13 '14 at 14:32

1 Answers1

0

Method To Save Canvas As Image:

Add HTML:

<div class="canvas__container">
  <canvas id="cnvs" class="canvas__canvas"></canvas>
  <img src="" id="mirror" class="canvas__mirror" />
</div>

Add CSS:

.canvas__container {
  height: 100%;
  position: relative;
  width: 100%;
}
.canvas__canvas {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.canvas__mirror {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; 
}

Add JS:

var cnvs = document.getElementById('cnvs'),
    ctx = cnvs.getContext('2d'),
    mirror = document.getElementById('mirror');


cnvs.width = mirror.width = window.innerWidth;
cnvs.height = mirror.height = window.innerHeight;

Adding Listener Event:

mirror.addEventListener('contextmenu', function (e) { });

Parse data canvas to data URL:

mirror.addEventListener('contextmenu', function (e) {
    var dataURL = canvas.toDataURL('image/png');
    mirror.src = dataURL;
});

Add Download Button:

<script>
var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
    var dataURL = canvas.toDataURL('image/png');
    button.href = dataURL;
});
</script>
<a href="#" class="button" id="btn-download">Download</a>

I Hope, It May Helps.

AlitheDev
  • 913
  • 3
  • 13
  • 21