annotate htdocs/svg-edit/editor/extensions/imagelib/index.html @ 632:8c00e2be925e

inital veraion 2.7 r2891 of svg-edit
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Thu, 05 Feb 2015 16:37:37 +0100
parents
children
rev   line source
632
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
1 <!DOCTYPE html>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
2 <html xmlns="http://www.w3.org/1999/xhtml">
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
3 <head>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
4 <meta charset="utf-8" />
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
6 </head>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
7 <body>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
8
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
9 <h1>Select an image:</h1>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
10 <a href="smiley.svg">smiley.svg</a>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
11 <br>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
12 <a href="../../images/logo.png">logo.png</a>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
13
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
14 <script>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
15 /*globals $*/
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
16 /*jslint vars: true*/
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
17 $('a').click(function() {'use strict';
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
18 var meta_str;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
19 var href = this.href;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
20 var target = window.parent;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
21 // Convert Non-SVG images to data URL first
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
22 // (this could also have been done server-side by the library)
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
23 if (this.href.indexOf('.svg') === -1) {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
24
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
25 meta_str = JSON.stringify({
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
26 name: $(this).text(),
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
27 id: href
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
28 });
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
29 target.postMessage(meta_str, '*');
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
30
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
31 var img = new Image();
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
32 img.onload = function() {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
33 var canvas = document.createElement('canvas');
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
34 canvas.width = this.width;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
35 canvas.height = this.height;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
36 // load the raster image into the canvas
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
37 canvas.getContext('2d').drawImage(this, 0, 0);
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
38 // retrieve the data: URL
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
39 var dataurl;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
40 try {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
41 dataurl = canvas.toDataURL();
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
42 } catch(err) {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
43 // This fails in Firefox with file:// URLs :(
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
44 alert("Data URL conversion failed: " + err);
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
45 dataurl = "";
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
46 }
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
47 target.postMessage('|' + href + '|' + dataurl, '*');
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
48 };
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
49 img.src = href;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
50 } else {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
51 // Send metadata (also indicates file is about to be sent)
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
52 meta_str = JSON.stringify({
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
53 name: $(this).text(),
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
54 id: href
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
55 });
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
56 target.postMessage(meta_str, '*');
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
57 // Do ajax request for image's href value
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
58 $.get(href, function(data) {
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
59 data = '|' + href + '|' + data;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
60 // This is where the magic happens!
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
61 target.postMessage(data, '*');
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
62
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
63 }, 'html'); // 'html' is necessary to keep returned data as a string
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
64 }
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
65 return false;
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
66 });
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
67
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
68 </script>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
69 </body>
8c00e2be925e inital veraion 2.7 r2891 of svg-edit
Reimar Bauer <rb.proj AT googlemail DOT com>
parents:
diff changeset
70 </html>