how to submit image as part of form after converting from canvas

Suppose I convert a canvas to image using .todataURL and then I want to submit this image as a part of my form.

.todataURL

How can I do that?

var url = document.querySelector('canvas').toDataURL();


How can use URL to submit this image as a part of my form?

1 Answer
1

You can add a hidden field in the form using JavaScript then submit

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", dataURL);

//append to form element that you want .
document.getElementById("Form").appendChild(input);
console.log(dataURL);

<canvas id="canvas" width="5" height="5"></canvas>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.