canvas to blob

gistfile1.txt

I think you should tranfer image in base64 to image with blob, because when you use base64 image, it take a lot of log lines or a lot of line will send to server. With blob, it only the file. You can use this code bellow:

dataURLtoBlob = (dataURL) ->
  # Decode the dataURL
  binary = atob(dataURL.split(',')[1])
  # Create 8-bit unsigned array
  array = []
  i = 0
  while i < binary.length
    array.push binary.charCodeAt(i)
    i++
  # Return our Blob object
new Blob([ new Uint8Array(array) ], type: 'image/png')
And canvas code here:

canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())
After that you can use ajax with Form:

  fd = new FormData
  # Append our Canvas image file to the form data
  fd.append 'image', file
  $.ajax
    type: 'POST'
    url: '/url-to-save'
    data: fd
    processData: false
    contentType: false
This code using CoffeeScript syntax.