Commits

Sylvain Rouquette committed f1fa74f

fixed svg serialization
IE9 support

Comments (0)

Files changed (3)

 	<link rel="icon" type="image/png" href="favicon.png" />
 	<link rel="stylesheet" type="text/css" href="style.css" />
 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
+	<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
+	<script type="text/javascript" src="js/jquery.getimagedata.min.js"></script>
 	<script type="text/javascript" src="js/tooltips.js"></script>
 	<script type="text/javascript" src="js/main.js"></script>
 	<title>Diablo3 Build Planner</title>
 
 	<div id="display_sig">
 	<h2><a id="save_sig" href="#">Signature</a></h2>
-	<svg id="signature" width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+	<svg id="signature" width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
 		<defs>
+			<style type="text/css"><![CDATA[
+				text {
+					fill: #D7851A;
+					width: 100%;
+					font-family: "Palatino Linotype";
+					font-size: 12px;
+				}
+			]]></style>
 			<svg id="frame" width="21" height="21" preserveAspectRatio="xMinYMin slice">
 				<image width="42" height="42" xlink:href="http://us.battle.net/d3/static/images/icons/frames/trait-21.png" />
 			</svg>
 			<svg id="rune_none" />
 			<svg id="rune_0" width="16" height="16" preserveAspectRatio="xMinYMin slice">
-				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" />
 			</svg>
 			<svg id="rune_1" width="16" height="16" preserveAspectRatio="xMinYMin slice">
-				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-16" />
+				<image width="96" height="16" x="-16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" />
 			</svg>
 			<svg id="rune_2" width="16" height="16" preserveAspectRatio="xMinYMin slice">
-				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-32" />
+				<image width="96" height="16" x="-32" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" />
 			</svg>
 			<svg id="rune_3" width="16" height="16" preserveAspectRatio="xMinYMin slice">
-				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-48" />
+				<image width="96" height="16" x="-48" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" />
 			</svg>
 			<svg id="rune_4" width="16" height="16" preserveAspectRatio="xMinYMin slice">
-				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-64" />
+				<image width="96" height="16" x="-64" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" />
 			</svg>
 		</defs>
 
-		<image id="crest" x="50%" y="0" width="200" height="100%" transform="translate(-100, 0)" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+		<image id="crest" x="50%" y="0" width="200" height="100%" transform="translate(-100, 0)" xlink:href="" />
 
 
 		<svg preserveAspectRatio="xMinYMax meet" viewBox="0 0 400 140">
 
 			<svg y="10" width="185">
 				<svg id="skill_0">
-					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" />
 					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_0"/>
-					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
-					</text>
+					<text  x="100%" y="13" transform="translate(-48, 0)" style="text-anchor: end;" />
 				</svg>
 				<svg y="24" id="skill_2">
-					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" />
 					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_1"/>
-					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
-					</text>
+					<text  x="100%" y="13" transform="translate(-48, 0)"  style="text-anchor: end;" />
 				</svg>
 				<svg y="48" id="skill_4">
-					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" />
 					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_1"/>
-					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
-					</text>
+					<text  x="100%" y="13" transform="translate(-48, 0)"  style="text-anchor: end;" />
 				</svg>
 			</svg>
 
 
 			<svg x="190" y="10" width="21">
 				<svg id="trait_0">
-					<image width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image width="21" height="21" xlink:href="" />
 					<use xlink:href="#frame"/>
 				</svg>
 				<svg id="trait_1">
-					<image y="24" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image y="24" width="21" height="21" xlink:href="" />
 					<use y="24" xlink:href="#frame"/>
 				</svg>
 				<svg id="trait_2">
-					<image y="48" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image y="48" width="21" height="21" xlink:href="" />
 					<use y="48" xlink:href="#frame"/>
 				</svg>
 			</svg>
 
 			<svg x="215" y="10" width="185">
 				<svg id="skill_1">
-					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="0"  y="0" width="21" height="21" xlink:href="" />
 					<use   x="26" y="2" xlink:href="#rune_2"/>
-					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
-					</text>
+					<text  x="48" y="13" />
 				</svg>
 				<svg y="24" id="skill_3">
-					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="0"  y="0" width="21" height="21" xlink:href="" />
 					<use   x="26" y="2" xlink:href="#rune_3"/>
-					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
-					</text>
+					<text  x="48" y="13" />
 				</svg>
 				<svg y="48" id="skill_5">
-					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<image x="0"  y="0" width="21" height="21" xlink:href="" />
 					<use   x="26" y="2" xlink:href="#rune_4"/>
-					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
-					</text>
+					<text  x="48" y="13" />
 				</svg>
 			</svg>
 

js/jquery.getimagedata.min.js

+/*
+ *
+ *  jQuery $.getImageData Plugin 0.3
+ *  http://www.maxnov.com/getimagedata
+ *  
+ *  Written by Max Novakovic (http://www.maxnov.com/)
+ *  Date: Thu Jan 13 2011
+ *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *  
+ *  Includes jQuery JSONP Core Plugin 2.1.4
+ *  http://code.google.com/p/jquery-jsonp/
+ *  Copyright 2010, Julian Aubourg
+ *  Released under the MIT License.
+ * 
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *  
+ *  Copyright 2011, Max Novakovic
+ *  Dual licensed under the MIT or GPL Version 2 licenses.
+ *  http://www.maxnov.com/getimagedata/#license
+ * 
+ */
+(function(c,g){function n(){}function o(a){s=[a]}function e(a,j,k){return a&&a.apply(j.context||j,k)}function h(a){function j(b){!l++&&g(function(){p();q&&(t[d]={s:[b]});z&&(b=z.apply(a,[b]));e(a.success,a,[b,A]);e(B,a,[a,A])},0)}function k(b){!l++&&g(function(){p();q&&b!=C&&(t[d]=b);e(a.error,a,[a,b]);e(B,a,[a,b])},0)}a=c.extend({},D,a);var B=a.complete,z=a.dataFilter,E=a.callbackParameter,F=a.callback,R=a.cache,q=a.pageCache,G=a.charset,d=a.url,f=a.data,H=a.timeout,r,l=0,p=n;a.abort=function(){!l++&&
+p()};if(e(a.beforeSend,a,[a])===false||l)return a;d=d||u;f=f?typeof f=="string"?f:c.param(f,a.traditional):u;d+=f?(/\?/.test(d)?"&":"?")+f:u;E&&(d+=(/\?/.test(d)?"&":"?")+encodeURIComponent(E)+"=?");!R&&!q&&(d+=(/\?/.test(d)?"&":"?")+"_"+(new Date).getTime()+"=");d=d.replace(/=\?(&|$)/,"="+F+"$1");q&&(r=t[d])?r.s?j(r.s[0]):k(r):g(function(b,m,v){if(!l){v=H>0&&g(function(){k(C)},H);p=function(){v&&clearTimeout(v);b[I]=b[w]=b[J]=b[x]=null;i[K](b);m&&i[K](m)};window[F]=o;b=c(L)[0];b.id=M+S++;if(G)b[T]=
+G;var O=function(y){(b[w]||n)();y=s;s=undefined;y?j(y[0]):k(N)};if(P.msie){b.event=w;b.htmlFor=b.id;b[I]=function(){/loaded|complete/.test(b.readyState)&&O()}}else{b[x]=b[J]=O;P.opera?(m=c(L)[0]).text="jQuery('#"+b.id+"')[0]."+x+"()":b[Q]=Q}b.src=d;i.insertBefore(b,i.firstChild);m&&i.insertBefore(m,i.firstChild)}},0);return a}var Q="async",T="charset",u="",N="error",M="_jqjsp",w="onclick",x="on"+N,J="onload",I="onreadystatechange",K="removeChild",L="<script/>",A="success",C="timeout",P=c.browser,
+i=c("head")[0]||document.documentElement,t={},S=0,s,D={callback:M,url:location.href};h.setup=function(a){c.extend(D,a)};c.jsonp=h})(jQuery,setTimeout);
+(function(c){c.getImageData=function(a){var f=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;if(a.url){var g=location.protocol==="https:",e="";e=a.server&&f.test(a.server)&&a.server.indexOf("https:")&&(g||a.url.indexOf("https:"))?a.server:"//img-to-json.appspot.com/?callback=?";c.jsonp({url:e,data:{url:escape(a.url)},dataType:"jsonp",timeout:1E4,success:function(b){var d=new Image;c(d).load(function(){this.width=b.width;this.height=b.height;typeof a.success==typeof Function&& a.success(this)}).attr("src",b.data)},error:function(b,d){typeof a.error==typeof Function&&a.error(b,d)}})}else typeof a.error==typeof Function&&a.error(null,"no_url")}})(jQuery);
 	</li>';
 
 var g_classes = {};
+var g_images = {};
 var g_current_class = 'barbarian';
 var g_filter_timer = 0;
 
 	});
 
 	$('#save_sig').click(function() {
-		var serializer = new XMLSerializer();
-		var xml = serializer.serializeToString(document.getElementById('signature'));
-		open("data:image/svg+xml;base64," + btoa(xml));
+		var link = '';
+		var img = null;
+		var timer = 0;
+		$('#signature image').each(function () {
+			img = $(this);
+			link = img.attr('xlink:href');
+			if (link.indexOf('http://') < 0)
+				return;
+			if (link in g_images) {
+				img.attr('xlink:href', g_images[link]);
+				return;
+			}
+			if (!timer)
+				timer = setTimeout('serializeSignature()', 1000);
+			( function(img, link) { $.getImageData({ url: link,
+			   success: function(image) {
+					g_images[link] = image.src;
+					img.attr('xlink:href', image.src);
+					clearTimeout(timer);
+					timer = setTimeout('serializeSignature()', 1000);
+				}
+			});
+			})(img, link);
+		});
+		if (!timer)
+			serializeSignature();
 		return false;
 	});
 
 })(jQuery);
 
 
+function serializeSignature() {
+	var serializer = new XMLSerializer();
+	var sig = document.getElementById('signature');
+	var xml = serializer.serializeToString(sig);
+	if (xml.indexOf('xlink:href=') == -1)	// fix bug with Chrome
+		xml = xml.replace(/xlink=/g, 'xmlns:xlink=').replace(/href=/g, 'xlink:href=');
+	open("data:image/svg+xml;base64," + btoa(xml));
+	return;
+
+	var canvas = document.createElement('canvas');
+
+	canvg(canvas, xml, { renderCallback: function() {
+			open(canvas.toDataURL('image/png'));
+		} });
+	return;
+
+	if (canvas.getContext) {
+		canvas.width = sig.offsetWidth;
+		canvas.height = sig.offsetHeight;
+		var ctx = canvas.getContext('2d');
+
+		var img = new Image();
+		img.onload = function() {
+			ctx.drawImage(img, 0, 0);
+			open(canvas.toDataURL('image/png'));
+		};
+		img.src = "data:image/svg+xml;base64," + btoa(xml);
+	}
+}
+
+
 function hashToPos(element) {
 	return HASH.indexOf(element.attr('data-hash'));
 }
 	});
 	params += '!' + runes;
 	$('#bnet_calc').attr('href', CALC_URL + params);
-	window.history.replaceState(null, null, '?' + params);
+	if ('replaceState' in window.history)
+		window.history.replaceState(null, null, '?' + params);
 	document.title = $('#class_selector [value="'+g_current_class+'"]').html() + ' - Diablo3 Build Planner';
 	if (level > 1)
 		$('#level').html(' (level '+level+')');
 	else
 		$('#level').html('');
 
-	console.log(count);
 	if (count == 9)
 		$('#display_sig').show();
 	else