Export/save graphics (getImageData, putImageData, toDataUrl)

[GoogleCodeExporter]

What steps will reproduce the problem?
1. try to call "canvas.toDataURL()"

What is the expected output? What do you see instead?
Expected : a PNG export of canvas data
Instead : function does not exists

What version of the product are you using? On what operating system?
SVN rev 63, tested in IE8/Vista ultimate

Please provide any additional information below.
WhatWG page :
http://www.whatwg.org/specs/web-apps/current-work/#dom-canvas-todataurl
Sample html file attached, click "init" and "paint"

Original issue reported on code.google.com by maitred...@gmail.com on 9 Jul 2009 at 9:45

Attachments:

• paint.html

[GoogleCodeExporter]

Hello, here is what you are looking for :
http://code.google.com/p/explorercanvas/issues/detail?id=13

Original comment by phenxdesign on 9 Jul 2009 at 9:55

[GoogleCodeExporter]

Hi,
Thanks for pointing this.

My goal is to create an ASP.NET control to add painting abilities for users 
(not as
advanced as http://canvaspaint.org/)

So is it possible only to add the code to handle call to
"canvas.ToDataURL('image/svg+xml')" by converting VML data to SVG ?

So developpers will be able to code a way to save images (either with native 
canvas
function or with server-side svg rendering).

For example :
var data;
try
{
  // native
  data = canvas.toDataURL();
}
catch
{
  data = canvas.toDataURL("image/svg+xml");
}

Additionnal code to excanvas :
el.toDataURL = function(format, arg) {
                if (format) {
                    if (format.toLowerCase() == "image/svg+xml") {
                            var svgdata = ConvertToSvg(); //convert actual data to svg
                            return "data:image/svg+xml;" + escape(svgdata);
                        }
                    } 
                }
                e = new Error();
                e.name = 'NotImplemented';
                e.message = 'ExplorerCanvas does not support image format other than
"image/svg+xml".';
                throw e;

Original comment by maitred...@gmail.com on 9 Jul 2009 at 10:15

[GoogleCodeExporter]

Ok, I didn't see it like that. 
This would be very easy to get the VML image from the generated canvas. There 
are a
few lib that can do VML2SVG, but one is written in C++
(http://openxmlviewer.codeplex.com/SourceControl/ListDownloadableCommits.aspx) 
, the
other one is in PHP (http://vectorconverter.sourceforge.net/). They are both 
based on
a XSLT stylesheet. This one could be used in a JS script that would make the
conversion. This part should be easy. 
But ! It looks like the conversion is far from being pixel perfect, so some work
should be done, and I think the XSLT is not enough. A few tweaks have to be 
done in
the script.

The SVG to bitmap file part could be handled by Image Magick on server side, 
but not
sure about this.

Original comment by phenxdesign on 9 Jul 2009 at 1:24

[GoogleCodeExporter]

I don't need to have a 100% perfect pixel copy. It's only to provide users same
application behavior for all major browsers.
Canvas is in all common browsers but IE. SVG os in all common browsers but IE 
(until
client install adobe svg plugin).
I thinks excanvas is very good (until MS decides to follow standards) but I 
think
that developpers that will code apps using canvas will need image saving at one 
time.

Have you seen the nice Wolfenstein 3D canvas sample  ? 
http://www.nihilogic.dk/labs/wolf/

I didn't tryed it using excanvas, but I think this can be interesting to have 
one
button on page to "instant-screenshot-upload-flickr", no ? :D

I will try to propose something...

For SVG server-side rendering either you have rendering libs (in my case
http://svg.codeplex.com/) or at last you have http://www.inkscape.org/

For VML to SVG, there is a XSLT project :
http://vectorconverter.sourceforge.net/index.html but it seams hard to use it to
convert generated VML to valid SVG with basic behaviors working...

Original comment by maitred...@gmail.com on 9 Jul 2009 at 3:15

[GoogleCodeExporter]

Maitredede,

I have the same goal as yours: "My goal is to create an ASP.NET control to add
painting abilities for users (not as advanced as http://canvaspaint.org/)"

Did you find any work around for this at all? Its a show stopper feature for 
me, so
any help would be hugely appreciated.

Thanks!

Original comment by hareshgp...@gmail.com on 12 Aug 2009 at 4:48

[GoogleCodeExporter]

Hi,

I will try to code a workaroud using Silverlight 3, but this will add an 
external xap
file. I think I can reduce xap to a minimal footprint...

Original comment by maitred...@gmail.com on 25 Sep 2009 at 8:09

[GoogleCodeExporter]

Hi,
I have managed to create an external Silverlight applet that add the "toDataURL"
function.

The PNG Encoder is taken from here :
http://www.andybeaulieu.com/Default.aspx?tabid=67&EntryID=161

In the zip :
* diff file
* source of silverlight applet
* sample page

Please give some feedback if you try it, thanks.

Original comment by maitred...@gmail.com on 28 Sep 2009 at 11:25

Attachments:

• excanvas.zip

[GoogleCodeExporter]

Hi phenxdes...@gmail.com/ Anyone, 

You mentioned  " This would be very easy to get the VML image from the 
generated 
canvas" - Could you please explain me how to get this VML image from generated 
canvas.

Venkat

Original comment by venkatsep14@gmail.com on 27 Apr 2010 at 7:02

[GoogleCodeExporter]

Hi,

"This would be very easy to get the VML image from the generated canvas" - 
Could 
someone please explain me the easy way to get the VML image from generated 
canvas.

Original comment by venkatsep14@gmail.com on 27 Apr 2010 at 7:10

[GoogleCodeExporter]

venkatsep14: Use innerHTML

Original comment by erik.arv...@gmail.com on 28 Apr 2010 at 6:53

[GoogleCodeExporter]

Issue 78 has been merged into this issue.

Original comment by fabien.menager on 29 Sep 2010 at 10:37

[GoogleCodeExporter]

Issue 77 has been merged into this issue.

Original comment by fabien.menager on 29 Sep 2010 at 10:37

[GoogleCodeExporter]

For putImageData usage only:
To get putImageData to work in IE8, you basically have to create binary image 
data, base64 it, then put it in a data URI and then ship it off into an image 
tag. Also, if you don't want to bust IE when your images go over 32KB, you need 
to draw to multiple images.
Thankfully, I've already created a script to do this. I use it to get IE8 to 
work with my gameboy color emulator.
The script that magically draws out putImageData requests is in here:
http://www.grantgalitz.org/gameboy/js/other/BMPCanvas.js

And the gameboy color emulator that uses it is here:
http://www.grantgalitz.org/gameboy/

Look into http://www.grantgalitz.org/gameboy/js/GameBoyCore.js to see how I set 
up the "fall-back" for when putImageData isn't available.

Original comment by grantgal...@gmail.com on 30 Sep 2010 at 7:40

[GoogleCodeExporter]

It also brings putImageData emulation to old-skool browsers that also support 
data URIs, but can't do Canvas' putImageData method (Possibly older Firefox?).

Original comment by grantgal...@gmail.com on 30 Sep 2010 at 8:01

[GoogleCodeExporter]

Issue 110 has been merged into this issue.

Original comment by fabien.menager on 16 Jul 2011 at 11:27

[GoogleCodeExporter]

Original comment by fabien.menager on 16 Jul 2011 at 11:28

• Changed title: Export/save graphics (getImageData, putImageData, toDataUrl)

[GoogleCodeExporter]

Can this be done by ActiveX?

Original comment by bret...@gmail.com on 11 Apr 2014 at 2:00