Added support for raster image loading through image libraries

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1636 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/extensions/ext-imagelib.js

@@ -20,11 +20,29 @@ svgEditor.addExtension("imagelib", function() {
 			description: 'Free library of 2300+ illustrations'
 		}
 	];
-
+	
+	var xlinkns = "http://www.w3.org/1999/xlink";
 
 	function closeBrowser() {
 		$('#imgbrowse_holder').hide();
 	}
+	
+	function importImage(url) {
+		var newImage = svgCanvas.addSvgElementFromJson({
+			"element": "image",
+			"attr": {
+				"x": 0,
+				"y": 0,
+				"width": 0,
+				"height": 0,
+				"id": svgCanvas.getNextId(),
+				"style": "pointer-events:inherit"
+			}
+		});
+		svgCanvas.clearSelection();
+		svgCanvas.addToSelection([newImage]);
+		svgCanvas.setImageURL(url);
+	}
 
 	 window.addEventListener("message", function(evt) {
 		// Receive postMessage data
@@ -42,15 +60,25 @@ svgEditor.addExtension("imagelib", function() {
 				svgCanvas.importSvgString(response);
 				break;
 			case 'd':
-				if(response.indexOf('data:') === 0) {
+				if(response.indexOf('data:image/svg+xml') === 0) {
 					var pre = 'data:image/svg+xml;base64,';
 					var src = response.substring(pre.length);
 					svgCanvas.importSvgString(svgCanvas.Utils.decode64(src));
 					break;
+				} else if(response.indexOf('data:image/') === 0) {
+					
+					importImage(response);
+					break;
 				}
 				// Else fall through
 			default:
-				$.alert('Unexpected data was returned', closeBrowser);
+				// TODO: See if there's a way to base64 encode the binary data stream
+// 				var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
+			
+				// Assume it's raw image data
+// 				importImage(str);
+			
+				$.alert('Unexpected data was returned: ' + response, closeBrowser);
 				return;
 		}
 		

editor/extensions/imagelib/index.html

@@ -6,20 +6,44 @@
 
 <h1>Select an image:</h1>
 <a href="smiley.svg">smiley.svg</a>
-
+<br>
+<a href="../../images/logo.png">logo.png</a>
 </body>
 
 <script>
 
 $('a').click(function() {
-
-	// Do ajax request for image's href value
-	$.get(this.href, function(data) {
 	
-		// This is where the magic happens!
-		window.top.postMessage(data, "*");
+	// 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) {
+		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
+			try {
+				var dataurl = canvas.toDataURL();
+			} catch(err) {
+				// This fails in Firefox with file:// URLs :(
+				alert("Data URL conversion failed: " + err);
+				var dataurl = "";
+			}
+			window.top.postMessage(dataurl, "*");
+		}
+		img.src = this.href;
+	} else {
+		// Do ajax request for image's href value
+		$.get(this.href, function(data) {
 		
-	}, 'html'); // 'html' is necessary to keep returned data as a string
+			// This is where the magic happens!
+			window.top.postMessage(data, "*");
+			
+		}, 'html'); // 'html' is necessary to keep returned data as a string
+	}
 	return false;
 });