2

Given a canvas in javascript, the normal workflow to save to a backend server is the following:

  1. Create canvas element
  2. Draw / modify canvas
  3. Call canvas.toDataURL()
  4. Upload this base64 representation of the canvas to your backend server (basic ajax).

Since the call to toDataURL() can be very slow, I'm wondering if it is possible to directly upload image bytes to a backend server, as opposed to the base64 way using toDataURL().

Any ideas?

Tim D
  • 195
  • 1
  • 10
  • 1
    Here's an answer to your question http://stackoverflow.com/a/31736411/1267530 – r0dney Jul 19 '16 at 19:53
  • IMO, _"call to toDataURL() can be very slow"_ is not true... – Rayon Jul 19 '16 at 19:56
  • 2
    You could try sending the content as a blob for a slight speed improvement, but if you want significantly better speed then create a reduced quality .jpg instead of the default .png: `context.toDataURL('image/jpeg',3)` – markE Jul 19 '16 at 19:59

1 Answers1

5

Use toBlob which returns a blob -or binary- object, instead of toDataURL. you can send the result directly to server. the call is async though

myCanvas.toBlob(function(myBlob) {
  // send blob to server here!!
}, "image/jpeg", 0.5);

NB: older MS doesn't support it but see the link in top for a shim. there are better shims out there tho.

bjanes
  • 263
  • 3
  • 11