I am coding a webpage where the user can take a photo with his phone camera, then the image will be processed and stored in the server.
I am storing the image content on a <canvas> an showing it with <img> tag but I don't know how to send that information to the server.
I just solved it by converting the canvas content into a blob and sending it to the server with fetch:
someButton.onclick = (e) => {
//some previous code
canvas.toBlob(upload)
}
function upload(blob) {
const form = new FormData();
form.append("img_name",blob)
fetch("/path/to/api", {
method:'POST',
body:form,
}, ).then(res => res.text()).then(resp => console.log(resp))
}
Then the server treats the file as needed.