Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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>


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.




var dataURL = canvas.toDataURL();


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




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


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




<?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.';  
  
?>  




Last Updated : 20 Aug, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads