How to convert canvas data into image

With the growing use of HTML5 in web development, its canvas element is something which cannot be ignored. In simple words, CANVAS element is used to draw graphics on a web page using javascript.

We often come across situations where we need to convert canvas data into images. In this tutorial we will learn how to convert canvas data into different image formats

 

Demo

Your browser does not support the canvas element.

         
 
         
 
         

 

How to implement?

First lets create a canvas element - 

        <canvas id="botcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">                   Your browser does not support the canvas element.

          </canvas>

This will create a rectangle of width 200px and height 100px. Next we will draw a circle in this rectangle, for this we will use javascript.

        <script type="text/javascript">

       It uses id of the canvas to find canvas element, (there are other ways also such as by name, tagname etc)

        var obotcanvas =document.getElementById("botcanvas");

       Then, create a context object -

var botcxt = obotcanvas.getContext("2d");

       These 2 lines will fill the canvas with white color -

botcxt.fillStyle="#FFFFFF";

botcxt.fillRect(0,0,200,100);

        Now create a circle,

botcxt.fillStyle="#FF0000";

botcxt.beginPath();

botcxt.arc(100,50,30,0,Math.PI*2,true);

botcxt.closePath();

botcxt.fill();

        </script>

        So, our initial task of making canvas is complete.

        Now lets convert this canvas to image.

        For this, first include canvas2image.js

       Click here to download canvas2image.js.

        Then, include it in your code- 

        <script type="text/javascript" src="canvas2image.js"></script>

        Now, we will use following functions defined in canvas2image.js-

        Canvas2Image.saveAsPNG(obotcanvas)//this function will let user to save image as png               Similarly, 

        Canvas2Image.saveAsBMP(obotCanvas);   // will let user to save image in bmp format 

        Canvas2Image.saveAsJPEG(obotCanvas);  // for jpeg format Only supported by Firefox.  

Rest all is simple and self explanatory.

 

CODE

The complete HTML code is given below.

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="canvas2image.js"></script>

<script type="text/javascript"> 

window.onload = function() {

var obotcanvas = document.getElementById("botcanvas");

var botcxt = obotcanvas.getContext("2d");

botcxt.fillStyle="#FFFFFF";

botcxt.fillRect(0,0,200,100);

botcxt.fillStyle="#FF0000";

botcxt.beginPath();

botcxt.arc(100,50,30,0,Math.PI*2,true);

botcxt.closePath();

botcxt.fill();

  function showDownloadText() {

document.getElementById("buttoncontainer").style.display = "none";

document.getElementById("textdownload").style.display = "block";

}

  function hideDownloadText() {

document.getElementById("buttoncontainer").style.display = "block";

document.getElementById("textdownload").style.display = "none";

}

  function converttoCanvas(strType) {

if (strType == "PNG")

var oImg = Canvas2Image.saveAsPNG(obotcanvas, true);

if (strType == "BMP")

var oImg = Canvas2Image.saveAsBMP(obotcanvas, true);

if (strType == "JPEG")

var oImg = Canvas2Image.saveAsJPEG(obotcanvas, true);

  if (!oImg) {

alert("Sorry, this browser is not capable of saving " + strType + " files!");

return false;

}

  oImg.id = "canvasimage";

  oImg.style.border = obotcanvas.style.border;

obotcanvas.parentNode.replaceChild(oImg, obotcanvas);

  showDownloadText();

}

document.getElementById("converttopngbutton").onclick = function() {

converttoCanvas("PNG");

}

document.getElementById("converttobmpbutton").onclick = function() {

converttoCanvas("BMP");

}

document.getElementById("converttojpegbutton").onclick = function() {

converttoCanvas("JPEG");

}

  document.getElementById("resetbutton").onclick = function() {

var oImg = document.getElementById("canvasimage");

oImg.parentNode.replaceChild(obotcanvas, oImg);

 

hideDownloadText();

}

 }

</script> 

</head>

<body>

<canvas id="botcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

<div id="buttoncontainer" style="display:block;"> 

<input type="button" id="converttopngbutton" value="Convert to PNG" /> 

<br/> 

 <input type="button" id="converttobmpbutton" value="Convert to BMP" /> 

<br/>  

<input type="button" id="converttojpegbutton" value="Convert to JPEG" /> 

 </div>

<div id="textdownload" style="display:none;">

Right click on image to save..

 <input type="button" id="resetbutton" value="Reset" />

</div>

</body>

</html>