Getting binary base64 data from HTML5 Canvas readAsBinaryString

Question

Is there any way of reading the contents of a HTML Canvas as binary data   At the moment I ve got the following HTML to show an input file and the canvas below it    lt p gt  lt button id  myButton  type  button  gt Get Image Content lt  button gt  lt  p gt   lt p gt Input  lt input id  fileInput  type  file   gt  lt  p gt   lt p gt Canvas lt canvas id  myCanvas  width  578  height  200   gt  lt  p gt    I ve then setup my input file to set the canvas correctly which works fine       fileInput   on  change   function           each this files  function             var image   new Image                image src   window URL createObjectURL this            image onload   function                    canvas   drawImage                   source  image                  x  50  y  50                  width  100                  fromCenter  false                                          I now need to get the binary data  Base64 encoded  from the Canvas when the button is clicked so it ll push the data to the server     The end result is that I need to provide the user with the ability to select a file  crop resize it  and then click a button at which point the edited image will be uploaded to the server  I can t do server-side cropping resizing due to server-side limitations      Any help would be great  Cheers

User · Answer

The canvas element provides a toDataURL method which returns a data  URL that includes the base64-encoded image data in a given format  For example   var jpegUrl   canvas toDataURL  image jpeg    var pngUrl   canvas toDataURL       PNG is the default   Although the return value is not just the base64 encoded binary data  it s a simple matter to trim off the scheme and the file type to get just the data you want   The toDataURL method will fail if the browser thinks you ve drawn to the canvas any data that was loaded from a different origin  so this approach will only work if your image files are loaded from the same server as the HTML page whose script is performing this operation   For more information see the MDN docs on the canvas API  which includes details on toDataURL  and the Wikipedia article on the data  URI scheme  which includes details on the format of the URI you ll receive from this call

User · Answer

Short answer  const base64Canvas   canvas toDataURL  quot image jpeg quot   split   base64    1

User · Answer

Seeing how you draw your canvas with      canvas   drawImage     it seems that you use jQuery Canvas  jCanvas  by Caleb Evans  I actually use that plugin and it has a simple way to retrieve canvas base64 image string with    canvas   getCanvasImage     Here s a working Fiddle for you  http   jsfiddle net e6nqzxpn

[javascript] Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Examples related to javascript

Examples related to html

Examples related to html5-canvas

Examples related to fileapi