CODEWITHSUNDEEP
javascripthtmlcanvas
Ashwin
Ashwin

Reputation: 13517

Sending canvas data to server

I have a canvas in my web page. Here the user draws an image. Now when the user clicks the submit button I want the browser to send the canvas data along with other fields.
Is it possible to send the canvas data. If yes how?

Upvotes: 2

Views: 1494

Answers (1)

hope_is_grim
hope_is_grim

Reputation: 1934

canvas.toDataURL("image/png");

will return your image data as a data: URI
You can set it to a hidden field and submit it with your form.
Or you can send it via AJAX request.

You can create another an image with the URI, and redraw the image

var imageURI = ...
// TODO: get the URI
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img,0,0);
}
img.src = imageURI;

Upvotes: 8

Related Questions