This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 10787 - Add a way to get a File/Blob from a <canvas>
Summary: Add a way to get a File/Blob from a <canvas>
Status: RESOLVED FIXED
Alias: None
Product: HTML WG
Classification: Unclassified
Component: pre-LC1 HTML5 spec (editor: Ian Hickson) (show other bugs)
Version: unspecified
Hardware: Other other
: P3 normal
Target Milestone: ---
Assignee: Ian 'Hixie' Hickson
QA Contact: HTML WG Bugzilla archive list
URL: http://www.whatwg.org/specs/web-apps/...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-09-28 04:21 UTC by contributor
Modified: 2011-11-01 16:35 UTC (History)
5 users (show)

See Also:


Attachments

Description contributor 2010-09-28 04:21:56 UTC
Section: http://www.whatwg.org/specs/web-apps/current-work/#security-with-canvas-elements

Comment:
I don't see a way to save the canvas data as a BMP or JPEG or anything else
that can then be uploaded via a FORM to a web server. This is a requirement, I
woudl think.

Posted from: 173.9.238.194
Comment 1 Tab Atkins Jr. 2010-09-28 06:29:36 UTC
Check out the toDataURL() function.  It saves the canvas data as a PNG by default, though implementations may offer the ability to save it in other formats such as JPEG or BMP.

You can stuff this data in a form the obvious way, and decode it into an actual image file on the server easily.
Comment 2 Jonas Sicking (Not reading bugmail) 2010-09-28 06:31:29 UTC
For what it's worth, firefox 4 recently added support for canvas.getAsFile() (though we added a vendor prefix so it's canvas.mozGetAsFile()) which has a similar syntax as canvas.toDataURL() but also takes an optional name.

Arguably canvas.getAsBlob() or canvas.toBlob() would be better since no name is needed.

Once a file/blob is retrieved it can be uploaded using XMLHttpRequest and optionally FormData.
Comment 3 Ian 'Hixie' Hickson 2010-09-30 08:10:21 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:
   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: Partially Accepted
Change Description: none yet
Rationale: Adding a way to get a File or Blob from a <canvas> makes sense, but I'd like to wait until the File API is a lot more stable and we have more experience with it before putting it in the spec.

Marking this LATER for now, but I'll revisit it occasionally.
Comment 4 Ian 'Hixie' Hickson 2011-11-01 16:35:36 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:
   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: Accepted
Change Description: canvas.toBlob()
Rationale: Concurred with reporter's comments.