I'm trying to make a ML webapp that recognizes drawn digits. I've managed to use HTML and javascript to draw on canvas but I need to return this image data back to the main files of Django for the prediction algorithm.

I'm able to "console.log" the image pixel data from the javascript file itself but how do I send this back to Django?

Here's the code that is used for drawing:

window.addEventListener("load", () => {

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

console.log("hi!")

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

let painting = false;

function startPosition(e){
    painting = true;
    draw(e);
}

function endPosition(){
    painting = false;
    ctx.beginPath();

    var imgData = ctx.getImageData(0, 0, window.innerHeight, window.innerWidth);

    console.log(imgData);

}

function draw(e) {

    if (!painting) return;

    ctx.lineWidth = 10;
    ctx.lineCap = 'round';

    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(e.clientX, e.clientY);
}

canvas.addEventListener("mousedown",startPosition);
canvas.addEventListener("mouseup",endPosition);
canvas.addEventListener("mousemove",draw);

});

0 Answers