canvas.toDataURL

[Dr J R Stockton]

Using <http://dev.w3.org/html5/spec/Overview.html#the-canvas-element>,
which I know to be Draft, I have painted a canvas (in not-IE), executed
as per, from the link,

url = canvas . toDataURL( [ type, ... ])
Returns a data: URL for the image in the canvas.

That gives a long string, apparently of one line, in one instance
starting

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAGQCAY

and ending

gMHwXTGAYDAaDwWD4LpjAMBgMBoPB8F38H+dJdN6Zfb30AAAAAElFTkSuQmCC

in an <input type=text readonly ...>, which (in at least one browser) I
can Select All, Copy.

Can anyone say how that string can be used, preferably with WinXP
facilities?

Perhaps it can be pasted into page source, within ??...?? to get an
inline graphic.

But I'd like to get an ordinary PNG file containing the picture on the
canvas, and if that string could be used in a more automated manner it
would be better than Alt-PrtScn, paste into Paint, trim, save as PNG.

 

[Dr J R Stockton]

In comp.lang.javascript message <5PGdnYtJ6KCNgmfXnZ2dnUVZ_ohi4p2d@gigane

Using <http://dev.w3.org/html5/spec/Overview.html#the-canvas-element>,
which I know to be Draft, I have painted a canvas (in not-IE), executed
as per, from the link,
url = canvas . toDataURL( [ type, ... ])
Returns a data: URL for the image in the canvas.
That gives a long string, apparently of one line, in one instance
starting
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAGQCAY
and ending
gMHwXTGAYDAaDwWD4LpjAMBgMBoPB8F38H+dJdN6Zfb30AAAAAElFTkSuQmC
C
in an <input type=text readonly ...>, which (in at least one
browser) I
can Select All, Copy.
Can anyone say how that string can be used, preferably with WinXP
facilities?
Perhaps it can be pasted into page source, within ??...?? to get an
inline graphic.

Paste it into `<img src="...">`, then save as a "regular" image.

One useful answer, especially after optimisation. Instead of writing
Rag.toDataURL() to an <input type=text name=Graph ...> with

Form.Graph.value = Rag.toDataURL()

I just include in the HTML <img ID=Kangax alt=""> and script

document.getElementById("Kangax").src = Rag.toDataURL() }

and save the image with right-click, "Save Image As". Now I can think
about hiding the canvas after setting the img (not before, as half-
painted canvas helps debugging) and removing the element from which the
string could be copied - after checking that it works in enough of my
browsers - yes, it does.

"Save Image As" sets a default of "index.png"; can that name be changed?

You could also paste that string into an address bar of Firefox (at
least 3.5), press enter, and see an image displayed right in a browser
window.

At least 3.0.15. But it's more effort, albeit the sort of answer I was
hoping for.

Working in <URL:http://www.merlyn.demon.co.uk/sitedata.htm>
which needs <URL:http://www.merlyn.demon.co.uk/include1.js>
and likes <URL:http://www.merlyn.demon.co.uk/styles-a.css>
copied locally; there is a Dummy button for those without data files.

Don't check the checkbox until you've understood the associated code; it
calls EVAL().

Thanks.

 

[Dr J R Stockton]

In comp.lang.javascript message <78qdnegVR5MVGmHXnZ2dnUVZ_t9i4p2d@gigane

Yep, it can be changed when saving it (in my FF 3.5.5 on Mac OS X).

Perhaps I did not put it clearly enough : I want to change it from
within JavaScript, so that the input data can come from (say)
Pic2649.gnp and the Save As dialogue will then suggest Pic2649.png.
How, if at all, can one do that?

= = =

If anyone here is in touch with HTML 5 (or 6) development : For the
purpose, among others, of drawing multiple graphs, it would be most
helpful if a path could be stroked not with a solid line but with a
dotted or dashed one, preferably with the ability to define a pattern by
an array.

Doing that at the JavaScript level is possible but non-trivial; it would
be better to have it done and debugged in browser source only once per
browser family.

ALTERNATIVELY : if one does it by setting context.strokeStyle, just how
exactly does one set it?