source: Dev/trunk/RGraph/docs/image2url.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 4.3 KB
Line 
1<html>
2<head>
3    <title>Image to data: url converter</title>
4   
5    <style>
6        body {
7            font-size: 12pt;
8            font-family: Georgia;
9        }
10    </style>
11</head>
12<body onload="document.getElementById('url').focus(); document.getElementById('url').value = '/images/logo.png'">
13
14    <div style="position: fixed; right: 5px; background-color: #eee; border: 2px solid #000; padding: 3px">
15        <a href="http://www.rgraph.net" target="_blank"><i>Courtesy of www.rgraph.net</i></a>
16    </div>
17
18    <h1>Image to data: url converter</h1>
19   
20    <i>
21        This only works for online images, which are on the [<script>document.write(location.host)</script>] domain. There's no server-side
22        scripting though, so feel free to put it on your website and use it there.
23    </i>
24   
25    <p />
26   
27    URL: <input type="text" value="" id="url" />
28    <button onclick="Go()">Go!</button>
29   
30    <p />
31
32    The data: url:
33    <textarea id="output" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the output URL goes...</textarea>
34
35    <p />
36   
37    A full image tag with the url as the src:
38    <textarea id="output_tag" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the image tag  goes...</textarea>
39
40    <p>The image itself using the data: url:</p>
41    <script>
42        function Go()
43        {
44            var url      = document.getElementById("url").value;
45            var text     = document.getElementById("output");
46            var text_tag = document.getElementById("output_tag");
47            var img      = document.createElement('IMG');
48
49            img.src = url;
50            document.body.appendChild(img);
51
52            /*******************************************************
53            * Create the canvas and paint the image onto it
54            *******************************************************/
55            canvas = CreateCanvas(img);
56           
57            /*******************************************************
58            * Now use the .toDataURL() function to get the data: url
59            *******************************************************/
60            var data = canvas.toDataURL();
61           
62            /*******************************************************
63            * Populate the first text box
64            *******************************************************/
65            text.value = data;
66            text.select();
67           
68            /*******************************************************
69            * Populate the second text box
70            *******************************************************/
71            text_tag.value = '<img src="' + data + '" width="' + img.offsetWidth + '" height="' + img.offsetHeight + '" alt="An image" />'
72           
73            /*******************************************************
74            * Add the image tag just created to the DOM
75            *******************************************************/
76            img.src = data;
77            img.width = img.offsetWidth;
78            img.height = img.offsetHeight;
79        }
80       
81        /*******************************************************
82        * This function creates the canvas and appends it to the
83        * DOM
84        *
85        * @param img The image DOM object
86        *******************************************************/
87        function CreateCanvas(img)
88        {
89            var canvas    = document.createElement('CANVAS');
90            var context   = canvas.getContext('2d');
91
92            canvas.width  = img.offsetWidth;
93            canvas.height = img.offsetHeight;
94            document.body.appendChild(canvas);
95
96            /*******************************************************
97            * Now add the image to the canvas
98            *******************************************************/
99            context.drawImage(img, 0, 0);
100           
101            /*******************************************************
102            * Move the canvas off-screen
103            *******************************************************/
104           
105            canvas.style.position = 'absolute';
106            canvas.style.left = (-1 * img.offsetWidth) + 'px';
107            canvas.style.top  = (-1 * img.offsetHeight) + 'px';
108           
109            return canvas;
110        }
111    </script>
112
113</body>
114</html>
Note: See TracBrowser for help on using the repository browser.