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