129 lines
5.1 KiB
HTML
129 lines
5.1 KiB
HTML
|
<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.OfficeExcel.net" target="_blank"><i>Courtesy of www.OfficeExcel.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.OfficeExcel.net" target="_blank">www.OfficeExcel.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("/OfficeExcel.{$prefix}/social.html");
|
||
|
|
?>
|
||
|
|
|