5

Detecting Canvas.toDataURL Support in Browsers

 3 years ago
source link: http://www.mikechambers.com/blog/2011/02/01/detecting-canvas-todataurl-support-in-browsers/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Detecting Canvas.toDataURL Support in Browsers

Tuesday, February 1, 2011

I am wrapping up a code example that uses the Canvas.toDataURL API to save canvas data to an image. I am almost done, and was doing a final round of browser testing when I noticed that my example wasnt working on my Android based Google Nexus One Device (2.2.2). After some debugging, and then Googling, I discovered that the Canvas.toDataURL API is not implemented on Android (you can view the bug report here).

Well, after some cursing, I put together a simple method for detecting whether the API is supported on any particular device. I wanted to share it in case anyone else might run into a need for it. So, here it is:

function supportsToDataURL()
{
	var c = document.createElement("canvas");
	var data = c.toDataURL("image/png");
	return (data.indexOf("data:image/png") == 0);
}

The code assumes that you are already checking for Canvas support.

Here is the script in action:

You browser is cool and supports Canvas.toDataURL();

and the code:

function supports_canvas()
{
	return !!document.createElement('canvas').getContext;
}

function supportsToDataURL()
{
	if(!supports_canvas())
	{
		return false;
	}
	
	var c = document.createElement("canvas");
	var data = c.toDataURL("image/png");
	return (data.indexOf("data:image/png") == 0);
}

var results = "";

if(supportsToDataURL())
{
	results="You browser is cool and supports Canvas.toDataURL();"
}
else
{
	results="You browser is lame and does NOT support Canvas.toDataURL();"
}
document.write(results);

If you have any fixes or suggestions for the detection, post them in the comments.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK