Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

by

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.

More Related Contents:

  1. Resize HTML5 canvas to fit window
  2. How to get a file or blob from an object URL?
  3. Resize image with javascript canvas (smoothly)
  4. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  5. Remember and Repopulate File Input [duplicate]
  6. HTML5 Canvas toDataURL returns blank
  7. How to download a file without using element with download attribute or a server?
  8. How do I fix blurry text in my HTML5 canvas?
  9. Getting byte array through input type = file
  10. PHP+JS: How to do Fileuploads in HTML Form as Content-Type Multipart (via JS)?
  11. HTML5 Canvas camera/viewport – how to actually do it?
  12. canvas2d toDataURL() different output on different browser
  13. How to upload image into HTML5 canvas
  14. How FileReader.readAsText in HTML5 File API works?
  15. Image manipulation and texture mapping using HTML5 Canvas?
  16. event.offsetX in Firefox
  17. Writing file to desktop using HTML5 FileSystem API
  18. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  19. addEventListener for keydown on Canvas
  20. Load image from url and draw to HTML5 Canvas
  21. Save canvas as jpg to desktop [duplicate]
  22. How to flip images horizontally with HTML5
  23. Large file upload with WebSocket
  24. how to draw a wheel of fortune?
  25. canvas getContext(“2d”) returns null
  26. clearing circular regions from HTML5 Canvas
  27. How can I get DPI from image in JS?
  28. HTML5 Canvas API – formatting individual words with italics
  29. True Isometric Projection with HTML5 Canvas
  30. Split text into pages and present separately (HTML5)

Leave a Comment