Django Save Screenshot with HTML Canvas

Let’s say you want to save the screenshot of a webpage in Django. For example, you might need to store a screenshot of an agreement with your client’s signature when it’s filled up and submitted.

If you look for an external library to do this, you might stumble upon django-screamshot. I haven’t tried this library, but it looks promising.

In this tutorial, however, I’ll show you how to achieve this using the HTML5 Canvas and Python.

Here’s my implementation of a Django save screenshot feature:

html2canvas

This is a great tool that converts a webpage — or parts of it — into an image using the HTML Canvas. You can download it here. There’s also a CDN. Include it on your webpage with the following code, and you’re good to go.

The Django Form

The form class for this needs to contain a CharField that will hold the data for the image. We use a CharField instead of something like an ImageField because we can’t programmatically populate a file upload field in HTML due to security reasons. So, we get the image in an encoded format and pass it along to the backend from the CharField. Here’s the form I used:

from django import forms
from crispy_forms.helper import FormHelper


class TestForm(forms.Form):
    """
    Form to upload the screenshot of a webpage
    """

    image_data = forms.CharField(widget=forms.HiddenInput(), required=False)

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_id = "agreement_form"
        self.helper.form_method = 'post'

        super(TestForm, self).__init__(*args, **kwargs)

from django import forms

from crispy_forms.helper import FormHelper

class TestForm(forms.Form):

"""

Form to upload the screenshot of a webpage

"""

image_data = forms.CharField(widget=forms.HiddenInput(), required=False)

def __init__(self, *args, **kwargs):

self.helper = FormHelper()

self.helper.form_id = "agreement_form"

self.helper.form_method = 'post'

super(TestForm, self).__init__(*args, **kwargs)

The HTML Page

This is the page we’ll be taking a screenshot of. For now let’s just include a bootstrap panel in there some dummy text. We also need a button to submit the form. Here’s the code:

{% load crispy_forms_tags %}

<!DOCTYPE html>
<html>
<head>
    <title>Screenshot!</title>

    {# html2canvas #}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

    {# jSignature #}
    <script type="text/javascript" src="/static/js/jSignature.min.js"></script>
    <script type="text/javascript" src="/static/js/django_jsignature.js"></script> <div id="div_id_signature" class="form-group">

    {# jQuery #}
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    {# bootstrap #}
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="text-center">My Test Webpage</h1>
                <hr>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        A wild panel
                    </div>
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt cupiditate, debitis soluta nobis doloribus nam, vero nisi. Vitae rerum dolores debitis quo voluptatem! Sit quasi voluptatibus ut, cupiditate laudantium eos.
                    </div>
                    <div class="row">
                        {% crispy form %}
                    </div>
                </div>
                <button type="button" id="submit" class="btn btn-primary">Save Screenshot</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $('#submit').click(function(){
            html2canvas(document.body,
            {
              onrendered: function (canvas) {
                // toDataURL defaults to png, so we need to request a jpeg
                image_data = canvas.toDataURL('image/jpeg');

                $('#id_image_data').val(image_data);
                $('#agreement_form').submit();
              }
            });
          });
    </script>
</body>
</html>

{% load crispy_forms_tags %}

<!DOCTYPE html>

<html>

<head>

<title>Screenshot!</title>

{# html2canvas #}

{# jSignature #}

{# jQuery #}

{# bootstrap #}

</head>

<body>

<h1 class="text-center">My Test Webpage</h1>

<hr>

A wild panel

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt cupiditate, debitis soluta nobis doloribus nam, vero nisi. Vitae rerum dolores debitis quo voluptatem! Sit quasi voluptatibus ut, cupiditate laudantium eos.

</div>

{% crispy form %}

</div>

<button type="button" id="submit" class="btn btn-primary">Save Screenshot</button>

</div>

$('#submit').click(function(){

html2canvas(document.body,

{

onrendered: function (canvas) {

// toDataURL defaults to png, so we need to request a jpeg

image_data = canvas.toDataURL('image/jpeg');

$('#id_image_data').val(image_data);

$('#agreement_form').submit();

}

});

</script>

</body>

</html>

This is what it looks like:

Webpage

The JavaScript code

Now we need to use html2canvas to generate an image of our website with some JavaScript. The examples shown on the official site only show how to generate and display the image, but we’ll need to convert the image to a data uri in order to send it to the backend. Here’s my implementation:

<script type="text/javascript">
    $('#submit').click(function(){
        html2canvas(document.body,
        {
          onrendered: function (canvas) {
            // toDataURL defaults to png, so we need to request a jpeg
            image_data = canvas.toDataURL('image/jpeg');

            $('#id_image_data').val(image_data);
            $('#agreement_form').submit();
          }
        });
      });
</script>

$('#submit').click(function(){

html2canvas(document.body,

{

onrendered: function (canvas) {

// toDataURL defaults to png, so we need to request a jpeg

image_data = canvas.toDataURL('image/jpeg');

$('#id_image_data').val(image_data);

$('#agreement_form').submit();

}

});

</script>

Decoding the Image

Now that we have the image data at the backend, we need to decode it into an actual image and save it where we need. This will require some base64 encoding and decoding magic that took wading through an incredible number of StackOverflow links to figure out. Here’s what I used in the end.

import re
import base64

...


class TestForm(forms.Form):

    """
    Form to upload the screenshot of a webpage
    """

    ...

    def save_screenshot(self):
        dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
        image_data = self.cleaned_data['image_data']
        image_data = dataUrlPattern.match(image_data).group(2)
        image_data = image_data.encode()
        image_data = base64.b64decode(image_data)

        with open('screenshot.jpg', 'wb') as f:
            f.write(image_data)

import re

import base64

...

class TestForm(forms.Form):

"""

Form to upload the screenshot of a webpage

"""

...

def save_screenshot(self):

dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')

image_data = self.cleaned_data['image_data']

image_data = dataUrlPattern.match(image_data).group(2)

image_data = image_data.encode()

image_data = base64.b64decode(image_data)

with open('screenshot.jpg', 'wb') as f:

f.write(image_data)

from django.http import HttpResponse
from django.views.generic.edit import FormView
from .forms import TestForm


class Test(FormView):
    template_name = "test.html"
    form_class = TestForm

    def form_valid(self, form, *args, **kwargs):
        form.save_screenshot()
        return HttpResponse("Done")

from django.http import HttpResponse

from django.views.generic.edit import FormView

from .forms import TestForm

class Test(FormView):

template_name = "test.html"

form_class = TestForm

def form_valid(self, form, *args, **kwargs):

form.save_screenshot()

return HttpResponse("Done")

Final Result

Here’s the result of the Django save screenshot:

Django save screenshot

Notes:

If you need a png image instead of a jpg, use canvas.toDataURL('image/png');
For this simple webpage, the screenshot is quite perfect. However, if you have complex CSS on your page, some elements may not render correctly.

Django: Save Screenshot of a Webpage

html2canvas

The Django Form

The HTML Page

The JavaScript code

Decoding the Image

Final Result

Notes:

1 Comment

Leave a Comment Cancel reply