diff 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
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/svg-edit/editor/extensions/imagelib/index.html	Thu Feb 05 16:37:37 2015 +0100
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8" />
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+</head>
+<body>
+
+<h1>Select an image:</h1>
+<a href="smiley.svg">smiley.svg</a>
+<br>
+<a href="../../images/logo.png">logo.png</a>
+
+<script>
+/*globals $*/
+/*jslint vars: true*/
+$('a').click(function() {'use strict';
+	var meta_str;
+	var href = this.href;
+	var target = window.parent;
+	// Convert Non-SVG images to data URL first 
+	// (this could also have been done server-side by the library)
+	if (this.href.indexOf('.svg') === -1) {
+
+		meta_str = JSON.stringify({
+			name: $(this).text(),
+			id: href
+		});
+		target.postMessage(meta_str, '*');
+
+		var img = new Image();
+		img.onload = function() {
+			var canvas = document.createElement('canvas');
+			canvas.width = this.width;
+			canvas.height = this.height;
+			// load the raster image into the canvas
+			canvas.getContext('2d').drawImage(this, 0, 0);
+			// retrieve the data: URL
+			var dataurl;
+			try {
+				dataurl = canvas.toDataURL();
+			} catch(err) {
+				// This fails in Firefox with file:// URLs :(
+				alert("Data URL conversion failed: " + err);
+				dataurl = "";
+			}
+			target.postMessage('|' + href + '|' + dataurl, '*');
+		};
+		img.src = href;
+	} else {
+		// Send metadata (also indicates file is about to be sent)
+		meta_str = JSON.stringify({
+			name: $(this).text(),
+			id: href
+		});
+		target.postMessage(meta_str, '*');
+		// Do ajax request for image's href value
+		$.get(href, function(data) {
+			data = '|' + href + '|' + data;
+			// This is where the magic happens!
+			target.postMessage(data, '*');
+			
+		}, 'html'); // 'html' is necessary to keep returned data as a string
+	}
+	return false;
+});
+
+</script>
+</body>
+</html>