| Server IP : 104.21.80.248 / Your IP : 172.71.28.156 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /Inetpub/www/myschool/triamudom/check/RGraph/docs/ |
Upload File : |
<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 -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/rgraph.{$prefix}/social.html");
?>