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 11566 - Image should have getContext(...) just like canvas
Summary: Image should have getContext(...) just like canvas
Alias: None
Product: HTML WG
Classification: Unclassified
Component: LC1 HTML5 spec (show other bugs)
Version: unspecified
Hardware: PC Windows NT
: P2 normal
Target Milestone: ---
Assignee: Ian 'Hixie' Hickson
QA Contact: HTML WG Bugzilla archive list
Depends on:
Reported: 2010-12-17 05:14 UTC by Sirisian
Modified: 2011-08-04 05:01 UTC (History)
4 users (show)

See Also:


Description Sirisian 2010-12-17 05:14:54 UTC
This would remove the problem of having to generate new canvases and render an image to them to do trivial operations like getting the ImageData.

var image = new Image();
var imageData;
image.onload = function()
	imageData = image.getContext("2d").getImageData(0, 0, image.width, image.height);
image.src = "example.png";
Comment 1 Ian 'Hixie' Hickson 2011-01-11 19:19:01 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:

Status: Partially Accepted
Change Description: none yet
Rationale: We'll probably add a way to get image data straight from a same-origin image in a future version (it's a little late in the cycle to add features right now), so I've marked this LATER.

In the meantime, though, why is "having to generate new canvases" a problem? It's only five extra lines of code, which are easily put into a utility function and forgotten:

image.onload = function()
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    imageData = context.getImageData(0, 0, image.width, image.height);

If you do this a lot, you can also just have a scratch canvas around for this purpose, already sized to the max of all the incoming images.
Comment 2 Michael[tm] Smith 2011-08-04 05:01:56 UTC
mass-moved component to LC1