How do I get a canvas to attach to paperclip so I can save it into my database?

Question

I have a little demo of this of my camera app:

https://shielded-plains-5586.herokuapp.com/

When you press "Drop', it creates a canvas after you take a picture with a webcam below it. My problem is that I don't know how to get the canvas into an image and have it save to my database through a form with paperclip on it. I'm really stumped. could anyone help?

Answer 1

Use canvas.toDataURL() , will return the image data URI.

Post it to your server where you need to write the file and save the path in the database.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData