canvas.toDataURL
Dr J R Stockton
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.
--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)
Thomas 'PointedEars' Lahn
> url = canvas . toDataURL( [ type, ... ])
LHS property and RHS method name are misnomers, see below.
> 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?
That string is a `data:' *URI*, specified in RFC 2397, and it can be used,
where supported, for which it is intended. Wikipedia has more, and we have
discussed them before in different contexts (last with saving a resource
with a known MIME media type, a hack proposed by TNO, IIRC).
> Perhaps it can be pasted into page source, within ??...?? to get an
> inline graphic.
If supported, it can be used everywhere where URIs are supported, e.g.:
// var img = new Image() || document.createElement("img") || ...
img.src = url;
> 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.
You can try saving the image that is so displayed with an `img' or `object'
element.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
kangax
> 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.
Paste it into `<img src="...">`, then save as a "regular" image.
>
> 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.
>
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.
--
kangax
Dr J R Stockton
ws.com>, Tue, 10 Nov 2009 21:18:56, kangax <kan...@gmail.com> posted:
>Dr J R Stockton wrote:
>> 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?
>> 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.
>>
>
>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.
kangax
Yep, it can be changed when saving it (in my FF 3.5.5 on Mac OS X).
[...]
--
kangax
Dr J R Stockton
ws.com>, Thu, 12 Nov 2009 17:09:12, kangax <kan...@gmail.com> posted:
>> "Save Image As" sets a default of "index.png"; can that name be
>>changed?
>
>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?
--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
kangax
> ws.com>, Thu, 12 Nov 2009 17:09:12, kangax <kan...@gmail.com> posted:
>
>>> "Save Image As" sets a default of "index.png"; can that name be
>>> changed?
>> 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?
I have no idea.
>
> = = =
>
> 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?
>
You might be interested in this thread on WHATWG mailing list
(http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-May/011200.html),
where Flanagan tries to convince Ian Hickson that this addition is worthy.
I see that conversation ends with Hickson asking Flanagan (and anyone
else) to speak up in case of demand.
--
kangax