Made various changes to image handling, will now change Data URI back into URL on import (if possible). Mork work still needed

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

editor/svg-editor.html

@@ -182,6 +182,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
     <label class="image_tool">url:</label>
     <input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
+    <button id="change_image_url" style="display:none;">Change URL</button>
+    <div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed" style="display:none;">(!)</div>
   </div>
 
 	<div id="circle_panel">
@@ -393,8 +395,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 			<fieldset id="image_save_opts">
 				<legend id="includedImages">Included Images</legend>
-				<label><input type="radio" name="image_opt" value="ref" checked="checked"/> <span id="image_opt_ref">Use file reference</span> </label>
+				<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
-				<label><input type="radio" name="image_opt" value="embed"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
+				<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
 			</fieldset>			
 
 

editor/svg-editor.js

@@ -73,7 +73,7 @@ function svg_edit_setup() {
 		iconsize:'m',
 		bg_color:'#FFF',
 		bg_url:'',
-		img_save:'ref'
+		img_save:'embed'
 	};
 	
 	var setSelectMode = function() {
@@ -358,8 +358,9 @@ function svg_edit_setup() {
 					}
 				} // text
 				else if(el_name == 'image') {
-          			var xlinkNS="http://www.w3.org/1999/xlink";
+					var xlinkNS="http://www.w3.org/1999/xlink";
-          			$('#image_url').val(elem.getAttributeNS(xlinkNS, "href"));
+					var href = elem.getAttributeNS(xlinkNS, "href");
+          			setImageURL(href);
         		} // image
 			}
 		} // if (elem != null)
@@ -510,7 +511,7 @@ function svg_edit_setup() {
   
 	// TODO: consider only setting the URL once Enter has been pressed?
 	$('#image_url').keyup(function(){
-		svgCanvas.setImageURL(this.value); 
+		setImageURL(this.value); 
 	});
 
 	$('.attr_changer').change(function() {
@@ -1275,6 +1276,34 @@ function svg_edit_setup() {
 	$('#tools_ellipse_show').click(clickCircle);
 	$('#tool_bold').mousedown(clickBold);
 	$('#tool_italic').mousedown(clickItalic);
+	$('#change_image_url').click(function() {
+		var url = prompt("Select the new image URL","http://");
+		if(url) setImageURL(url);
+	});
+
+	function setImageURL(url) {
+		svgCanvas.setImageURL(url);
+		$('#image_url').val(url);
+		
+		if(url.indexOf('data:') === 0) {
+			// data URI found
+			$('#image_url').hide();
+			$('#change_image_url').show();
+		} else {
+			// regular URL
+			
+			var img = svgCanvas.embedImage(url);
+			if(img == url && curPrefs.img_save == 'embed') {
+				// Couldn't embed, so show warning
+				$('#url_notice').show();
+			} else {
+				$('#url_notice').hide();
+			}
+			
+			$('#image_url').show();
+			$('#change_image_url').hide();
+		}
+	}
 
 	// added these event handlers for all the push buttons so they
 	// behave more like buttons being pressed-in and not images

editor/svgcanvas.js

@@ -1201,7 +1201,8 @@ function BatchCommand(text) {
 			canvas.getContext("2d").drawImage(img,0,0);
 			// retrieve the data: URL
 			try {
-				result = canvas.toDataURL();
+				var urldata = ';svgedit_url=' + encodeURIComponent(val);
+				result = canvas.toDataURL().replace(';base64',urldata+';base64');
 			} catch(e) {
 				result = val;
 			}
@@ -3948,6 +3949,22 @@ function BatchCommand(text) {
     	    // set new svg document
         	svgcontent = svgroot.appendChild(svgdoc.importNode(newDoc.documentElement, true));
         	
+        	// change image href vals if possible
+        	$(svgcontent).find('image').each(function() {
+        		var image = this;
+        		var val = this.getAttributeNS(xlinkns, "href");
+				if(val.indexOf('data:') === 0) {
+					// Check if an SVG-edit data URI
+					var m = val.match(/svgedit_url=(.*?);/);
+					if(m) {
+						var url = decodeURIComponent(m[1]);
+						$(new Image()).load(function() {
+							image.setAttributeNS(xlinkns,'href',url);
+						}).attr('src',url);
+					}
+				}
+        	});
+        	
         	// Fix XML for Opera/Win/Non-EN
 			if(window.opera) {
 				canvas.fixOperaXML(svgcontent, newDoc.documentElement);