blob: 7579bd5ef23e51eb35524a3fa57fe271c55c9c15 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<html>
<head>
<title>Image to data: url converter</title>
<style>
body {
font-size: 12pt;
font-family: Georgia;
}
</style>
</head>
<body onload="document.getElementById('url').focus(); document.getElementById('url').value = '/images/logo.png'">
<div style="position: fixed; right: 5px; background-color: #eee; border: 2px solid #000; padding: 3px">
<a href="http://www.rgraph.net" target="_blank"><i>Courtesy of www.rgraph.net</i></a>
</div>
<h1>Image to data: url converter</h1>
<i>
This only works for online images, which are on the [<script>document.write(location.host)</script>] domain. There's no server-side
scripting though, so feel free to put it on your website and use it there.
</i>
#
<h2>Why use data: URLs?</h2>
<p>
By using data: URLs you reduce the number of HTTP requests needed to display your page since the images are part of the
page itself. This does mean though that the images can't be cached (unless of course the page itself is cached). But, if you were
to reuse the same image on subsequent pages, they wouldn't be cached. You can get around this though by using some
Javascript at the bottom of your page to change the URLs to the real image files. The
<a href="http://www.rgraph.net" target="_blank">www.rgraph.net</a> front page uses this technique.
</p>
<p />
URL: <input type="text" value="" id="url" />
<button onclick="Go()">Go!</button>
<p />
The data: url:
<textarea id="output" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the output URL goes...</textarea>
<p />
A full image tag with the url as the src:
<textarea id="output_tag" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the image tag goes...</textarea>
<p>The image itself using the data: url:</p>
<script>
function Go()
{
var url = document.getElementById("url").value;
var text = document.getElementById("output");
var text_tag = document.getElementById("output_tag");
var img = document.createElement('IMG');
img.src = url;
document.body.appendChild(img);
/*******************************************************
* Create the canvas and paint the image onto it
*******************************************************/
canvas = CreateCanvas(img);
/*******************************************************
* Now use the .toDataURL() function to get the data: url
*******************************************************/
var data = canvas.toDataURL();
/*******************************************************
* Populate the first text box
*******************************************************/
text.value = data;
text.select();
/*******************************************************
* Populate the second text box
*******************************************************/
text_tag.value = '<img src="' + data + '" width="' + img.offsetWidth + '" height="' + img.offsetHeight + '" alt="An image" />'
/*******************************************************
* Add the image tag just created to the DOM
*******************************************************/
img.src = data;
img.width = img.offsetWidth;
img.height = img.offsetHeight;
}
/*******************************************************
* This function creates the canvas and appends it to the
* DOM
*
* @param img The image DOM object
*******************************************************/
function CreateCanvas(img)
{
var canvas = document.createElement('CANVAS');
var context = canvas.getContext('2d');
canvas.width = img.offsetWidth;
canvas.height = img.offsetHeight;
document.body.appendChild(canvas);
/*******************************************************
* Now add the image to the canvas
*******************************************************/
context.drawImage(img, 0, 0);
/*******************************************************
* Move the canvas off-screen
*******************************************************/
canvas.style.position = 'absolute';
canvas.style.left = (-1 * img.offsetWidth) + 'px';
canvas.style.top = (-1 * img.offsetHeight) + 'px';
return canvas;
}
</script>
</body>
</html><!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px">
<!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> -->
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.rgraph.net"></g:plusone>
</div>
|
