Load an html5 canvas into a PIL Image with Django

Question

I\'m trying to get the contents of an html5 canvas and pass it to my django server, where it will then be manipulated with PIL and saved as a PNG. Here\'s what I have so far

Answer 1

For Django 3.0 and python 3.7 code in the html file (which are called templates in the django)

        {% csrf_token %}
        
        
        
        
         
        
        
        
        
    

in the javascript file

var canvas;
function save(){
            canvas = document.getElementById('camera--sensor');
            document.getElementById('captured_image').value = canvas.toDataURL('image/png');
          
        }

in the views.py file for Django

def capture_image(request):
    if request.method=="POST":
        # print("-------",request.POST)
        if request.POST.get('captured_image'):
            captured_image = request.POST.get('captured_image')
            # imgstr = captured_image.decode('base64')
            imgstr = re.search('base64,(.*)', captured_image).group(1)
            imgstr = base64.b64decode(imgstr)
            # print(imgstr)
            tempimg = io.BytesIO(imgstr)

            im = Image.open(tempimg)