How to save an HTML 5 Canvas as an image on the server ?

Saving HTML canvas as an image is pretty easy, it can be done by just right-clicking on the canvas and save it as an image. But saving canvas as an image on the server is quite different. This article will show you how to achieve that. Sometimes it is required to save canvas image after doing some server processing and this article will help in sending canvas image over the server for processing.

Here you will see, how to convert an HTML content into an image using JQuery. We know that there is a plugins html2canvas, by using that plugin we can easily convert the HTML content into image content after that we can save that file by right-clicking and choosing the save image option.

After that, we will convert that CANVAS image into the URL format and that to the server by using ajax after that the main part will be done by the PHP code. The PHP code will save that image on your server.

Below steps will illustrate the approach clearly.

Step 1: HTML code to convert canvas into image.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title></title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .top {
            margin-top: 20px;
        }
          
        h1 {
            color: green;
        }
          
        input {
            background-color: transparent;
            border: 0px solid;
            width: 300;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
        <div id="createImg" style="border:1px solid;">
            <h1>GeeksforGeeks</h1>
            <h4>How to save an HTML5 Canvas as an 
                           image on a server?</h4>
            <input type="text" value=""
    placeholder="Enter wahtaever you want" class="form-control" />
            <br/>
        </div>
        <button id="geeks" type="button" 
                                      class="btn btn-primary top">
            Create Image</button>
        <div id="img" style="display:none;">
            <img src="" id="newimg" class="top" />
        </div>
    </div>
    <script>
        $(function() {
            $("#geeks").click(function() {
                html2canvas($("#createImg"), {
                    onrendered: function(canvas) {
                        var imgsrc = canvas.toDataURL("image/png");
                        console.log(imgsrc);
                        $("#newimg").attr('src', imgsrc);
                        $("#img").show();
                        var dataURL = canvas.toDataURL();
                        $.ajax({
                            type: "POST",
                            url: "script.php",
                            data: {
                                imgBase64: dataURL
                            }
                        }).done(function(o) {
                            console.log('saved');
                        });
                    }
                });
            });
        });
    </script>
</body>
  
</html>

chevron_right


Step 2: Display the output to check that the canvas is successfully converted into an image.

  • Before clicking the Button:
  • After clicking the Button:

Step 3: Converting the image into URL format using canvas.toDataURL() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

var dataURL = canvas.toDataURL();

chevron_right


Step 4: Sending the converted URL format into your server via Ajax.

filter_none

edit
close

play_arrow

link
brightness_4
code

$.ajax({
    type: "POST",
    url: "script.php",
    data: { 
        imgBase64: dataURL
    }
}).done(function(o) {
    console.log('saved'); 
});

chevron_right


Step 5: This php code will save the image into the server.

filter_none

edit
close

play_arrow

link
brightness_4
code

<?php  
  
// Requires php5  
define('UPLOAD_DIR', 'images/');  
$img = $_POST['imgBase64'];  
$img = str_replace('data:image/png;base64,', '', $img);  
$img = str_replace(' ', '+', $img);  
$data = base64_decode($img);  
$file = UPLOAD_DIR . uniqid() . '.png';  
$success = file_put_contents($file, $data);  
print $success ? $file : 'Unable to save the file.';  
  
?>  

chevron_right




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.