init repo
This commit is contained in:
nikolay ivanov
129
OfficeWeb/sdk/Common/Charts/docs/image2url.html
Normal file
129
OfficeWeb/sdk/Common/Charts/docs/image2url.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<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");
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user