summaryrefslogtreecommitdiff
path: root/schall/static/RGraph/docs/image2url.html
diff options
context:
space:
mode:
authorYves Fischer <yvesf-git@xapek.org>2011-10-23 21:14:40 +0200
committerYves Fischer <yvesf-git@xapek.org>2011-10-30 11:33:54 +0100
commit770ba5201f5c60b2bb36602ff9d359f641e33125 (patch)
tree2200757f04efbc281c4b3714bfe2e4fe911193b6 /schall/static/RGraph/docs/image2url.html
parent77f5e686612898974e13f2a5df57c20e4e529363 (diff)
downloadmini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.tar.gz
mini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.zip
Charting with flask, rgraph and custom "timeseries database"
Diffstat (limited to 'schall/static/RGraph/docs/image2url.html')
-rw-r--r--schall/static/RGraph/docs/image2url.html142
1 files changed, 142 insertions, 0 deletions
diff --git a/schall/static/RGraph/docs/image2url.html b/schall/static/RGraph/docs/image2url.html
new file mode 100644
index 0000000..7579bd5
--- /dev/null
+++ b/schall/static/RGraph/docs/image2url.html
@@ -0,0 +1,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&notes=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&amp;href=http%3A%2F%2Fwww.rgraph.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;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>
+ \ No newline at end of file