canvas2svg.js

/*!!
 *  Canvas 2 Svg v1.0.6
 *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
 *
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *  Author:
 *  Kerry Liu
 *
 *  Copyright (c) 2014 Gliffy Inc.
 */
!function(){"use strict";var t,e,r,i,n;function o(t,e){var r,i=Object.keys(e);for(r=0;r<i.length;r++)t=t.replace(new RegExp("\\{"+i[r]+"\\}","gi"),e[i[r]]);return t}function s(t){var e,r,i;if(!t)throw new Error("cannot create a random attribute name for an undefined object");e="ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz",r="";do{for(r="",i=0;i<12;i++)r+=e[Math.floor(Math.random()*e.length)]}while(t[r]);return r}function a(t){var e={alphabetic:"alphabetic",hanging:"hanging",top:"text-before-edge",bottom:"text-after-edge",middle:"central"};return e[t]||e.alphabetic}n=function(t,e){var r,i,n,o={};for(t=t.split(","),e=e||10,r=0;r<t.length;r+=2)i="&"+t[r+1]+";",n=parseInt(t[r],e),o[i]="&#"+n+";";return o["\\xa0"]="&#160;",o}("50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,t9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro",32),t={strokeStyle:{svgAttr:"stroke",canvas:"#000000",svg:"none",apply:"stroke"},fillStyle:{svgAttr:"fill",canvas:"#000000",svg:null,apply:"fill"},lineCap:{svgAttr:"stroke-linecap",canvas:"butt",svg:"butt",apply:"stroke"},lineJoin:{svgAttr:"stroke-linejoin",canvas:"miter",svg:"miter",apply:"stroke"},miterLimit:{svgAttr:"stroke-miterlimit",canvas:10,svg:4,apply:"stroke"},lineWidth:{svgAttr:"stroke-width",canvas:1,svg:1,apply:"stroke"},globalAlpha:{svgAttr:"opacity",canvas:1,svg:1,apply:"fill stroke"},font:{canvas:"10px sans-serif"},shadowColor:{canvas:"#000000"},shadowOffsetX:{canvas:0},shadowOffsetY:{canvas:0},shadowBlur:{canvas:0},textAlign:{canvas:"start"},textBaseline:{canvas:"alphabetic"}},(r=function(t){this.__root=t}).prototype.addColorStop=function(t,e){var r,i=document.createElementNS("http://www.w3.org/2000/svg","stop");i.setAttribute("offset",t),-1!==e.indexOf("rgba")?(r=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi.exec(e),i.setAttribute("stop-color",o("rgb({r},{g},{b})",{r:r[1],g:r[2],b:r[3]})),i.setAttribute("stop-opacity",r[4])):i.setAttribute("stop-color",e),this.__root.appendChild(i)},i=function(t,e){this.__root=t,this.__ctx=e},e=function(t){var r,i={width:500,height:500,enableMirroring:!1};if(arguments.length>1?((r=i).width=arguments[0],r.height=arguments[1]):r=t||i,!(this instanceof e))return new e(r);this.width=r.width||i.width,this.height=r.height||i.height,this.enableMirroring=void 0!==r.enableMirroring?r.enableMirroring:i.enableMirroring,this.canvas=this,this.__canvas=document.createElement("canvas"),this.__ctx=this.__canvas.getContext("2d"),this.__setDefaultStyles(),this.__stack=[this.__getStyleState()],this.__groupStack=[],this.__root=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.__root.setAttribute("version",1.1),this.__root.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),this.__root.setAttribute("width",this.width),this.__root.setAttribute("height",this.height),this.__ids={},this.__defs=document.createElementNS("http://www.w3.org/2000/svg","defs"),this.__root.appendChild(this.__defs),this.__currentElement=document.createElementNS("http://www.w3.org/2000/svg","g"),this.__root.appendChild(this.__currentElement)},e.prototype.__createElement=function(t,e,r){var i,n,o=document.createElementNS("http://www.w3.org/2000/svg",t),s=Object.keys(e);for(r&&(o.setAttribute("fill","none"),o.setAttribute("stroke","none")),i=0;i<s.length;i++)n=s[i],o.setAttribute(n,e[n]);return o},e.prototype.__setDefaultStyles=function(){var e,r,i=Object.keys(t);for(e=0;e<i.length;e++)this[r=i[e]]=t[r].canvas},e.prototype.__applyStyleState=function(t){var e,r,i=Object.keys(t);for(e=0;e<i.length;e++)this[r=i[e]]=t[r]},e.prototype.__getStyleState=function(){var e,r,i={},n=Object.keys(t);for(e=0;e<n.length;e++)i[r=n[e]]=this[r];return i},e.prototype.__applyStyleToCurrentElement=function(e){var n,s,a,l,h,p=Object.keys(t);for(n=0;n<p.length;n++)if(s=t[p[n]],a=this[p[n]],s.apply)if(-1!==s.apply.indexOf("fill")&&a instanceof i){if(a.__ctx)for(;a.__ctx.__defs.childNodes.length;)l=a.__ctx.__defs.childNodes[0].getAttribute("id"),this.__ids[l]=l,this.__defs.appendChild(a.__ctx.__defs.childNodes[0]);this.__currentElement.setAttribute("fill",o("url(#{id})",{id:a.__root.getAttribute("id")}))}else-1!==s.apply.indexOf("fill")&&a instanceof r?this.__currentElement.setAttribute("fill",o("url(#{id})",{id:a.__root.getAttribute("id")})):-1!==s.apply.indexOf(e)&&s.svg!==a&&("stroke"!==s.svgAttr&&"fill"!==s.svgAttr||-1===a.indexOf("rgba")?this.__currentElement.setAttribute(s.svgAttr,a):(h=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi.exec(a),this.__currentElement.setAttribute(s.svgAttr,o("rgb({r},{g},{b})",{r:h[1],g:h[2],b:h[3]})),this.__currentElement.setAttribute(s.svgAttr+"-opacity",h[4])))},e.prototype.__closestGroupOrSvg=function(t){return"g"===(t=t||this.__currentElement).nodeName||"svg"===t.nodeName?t:this.__closestGroupOrSvg(t.parentNode)},e.prototype.getSerializedSvg=function(t){var e,r,i,o,s,a=(new XMLSerializer).serializeToString(this.__root);if(/xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi.test(a)&&(a=a.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink')),t)for(e=Object.keys(n),r=0;r<e.length;r++)i=e[r],o=n[i],(s=new RegExp(i,"gi")).test(a)&&(a=a.replace(s,o));return a},e.prototype.getSvg=function(){return this.__root},e.prototype.save=function(){var t=document.createElementNS("http://www.w3.org/2000/svg","g"),e=this.__closestGroupOrSvg();this.__groupStack.push(e),e.appendChild(t),this.__currentElement=t,this.__stack.push(this.__getStyleState())},e.prototype.restore=function(){this.__currentElement=this.__groupStack.pop();var t=this.__stack.pop();this.__applyStyleState(t)},e.prototype.__addTransform=function(t){var e=this.__currentElement.getAttribute("transform");e?e+=" ":e="",e+=t,this.__currentElement.setAttribute("transform",e)},e.prototype.scale=function(t,e){void 0===e&&(e=t),this.__addTransform(o("scale({x},{y})",{x:t,y:e}))},e.prototype.rotate=function(t){var e=180*t/Math.PI;this.__addTransform(o("rotate({angle},{cx},{cy})",{angle:e,cx:0,cy:0}))},e.prototype.translate=function(t,e){this.__addTransform(o("translate({x},{y})",{x:t,y:e}))},e.prototype.transform=function(t,e,r,i,n,s){this.__addTransform(o("matrix({a},{b},{c},{d},{e},{f})",{a:t,b:e,c:r,d:i,e:n,f:s}))},e.prototype.beginPath=function(){var t;t=this.__createElement("path",{},!0),this.__closestGroupOrSvg().appendChild(t),this.__currentElement=t},e.prototype.__addPathCommand=function(t){if("path"!==this.__currentElement.nodeName)throw new Error("Attempted to add path command to node "+this.__currentElement.nodeName);var e=this.__currentElement.getAttribute("d");e?e+=" ":e="",e+=t,this.__currentElement.setAttribute("d",e)},e.prototype.moveTo=function(t,e){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.__addPathCommand(o("M {x} {y}",{x:t,y:e}))},e.prototype.closePath=function(){this.__addPathCommand("Z")},e.prototype.lineTo=function(t,e){this.__addPathCommand(o("L {x} {y}",{x:t,y:e}))},e.prototype.bezierCurveTo=function(t,e,r,i,n,s){this.__addPathCommand(o("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",{cp1x:t,cp1y:e,cp2x:r,cp2y:i,x:n,y:s}))},e.prototype.quadraticCurveTo=function(t,e,r,i){this.__addPathCommand(o("Q {cpx} {cpy} {x} {y}",{cpx:t,cpy:e,x:r,y:i}))},e.prototype.stroke=function(){this.__applyStyleToCurrentElement("stroke")},e.prototype.fill=function(){this.__applyStyleToCurrentElement("fill")},e.prototype.rect=function(t,e,r,i){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.moveTo(t,e),this.lineTo(t+r,e),this.lineTo(t+r,e+i),this.lineTo(t,e+i),this.lineTo(t,e),this.closePath()},e.prototype.fillRect=function(t,e,r,i){var n;n=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(n),this.__currentElement=n,this.__applyStyleToCurrentElement("fill")},e.prototype.strokeRect=function(t,e,r,i){var n;n=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(n),this.__currentElement=n,this.__applyStyleToCurrentElement("stroke")},e.prototype.clearRect=function(t,e,r,i){var n,o=this.__closestGroupOrSvg();n=this.__createElement("rect",{x:t,y:e,width:r,height:i,fill:"#FFFFFF"},!0),o.appendChild(n)},e.prototype.createLinearGradient=function(t,e,i,n){var o=this.__createElement("linearGradient",{id:s(this.__ids),x1:t+"px",x2:i+"px",y1:e+"px",y2:n+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(o),new r(o)},e.prototype.createRadialGradient=function(t,e,i,n,o,a){var l=this.__createElement("radialGradient",{id:s(this.__ids),cx:n+"px",cy:o+"px",r:a+"px",fx:t+"px",fy:e+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(l),new r(l)},e.prototype.__parseFont=function(){var t,e,r=this.font,i=0,n={style:"normal",size:"10px",family:"sans-serif",weight:"normal",decoration:"none",href:null};for("underline"===this.__fontUnderline&&(n.decoration="underline"),this.__fontHref&&(n.href=this.__fontHref),e=(t=r.split(" "))[i];/italic|bold|normal/.test(e);)"bold"===e?n.weight=e:n.style=e,e=t[++i];return/em|px|pt|%/.test(e)&&(n.size=e,i++),t.splice(0,i),n.family=t.join(" "),n},e.prototype.__wrapTextLink=function(t,e){if(t.href){var r=document.createElementNS("http://www.w3.org/2000/svg","a");return r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t.href),r.appendChild(e),r}return e},e.prototype.__applyText=function(t,e,r,i){var n,o,s=this.__parseFont(),l=this.__closestGroupOrSvg(),h=this.__createElement("text",{"font-family":s.family,"font-size":s.size,"font-style":s.style,"font-weight":s.weight,"text-decoration":s.decoration,x:e,y:r,"text-anchor":(n=this.textAlign,o={left:"start",right:"end",center:"middle",start:"start",end:"end"},o[n]||o.start),"dominant-baseline":a(this.textBaseline)},!0);h.appendChild(document.createTextNode(t)),this.__currentElement=h,this.__applyStyleToCurrentElement(i),l.appendChild(this.__wrapTextLink(s,h))},e.prototype.fillText=function(t,e,r){this.__applyText(t,e,r,"fill")},e.prototype.strokeText=function(t,e,r){this.__applyText(t,e,r,"stroke")},e.prototype.measureText=function(t){return this.__ctx.font=this.font,this.__ctx.measureText(t)},e.prototype.arc=function(t,e,r,i,n,s){(i%=2*Math.PI)===(n%=2*Math.PI)&&(n=(n+2*Math.PI-.001*(s?-1:1))%(2*Math.PI));var a=t+r*Math.cos(n),l=e+r*Math.sin(n),h=t+r*Math.cos(i),p=e+r*Math.sin(i),c=s?0:1,d=0,u=n-i;u<0&&(u+=2*Math.PI),d=s?u>Math.PI?0:1:u>Math.PI?1:0,this.moveTo(h,p),this.__addPathCommand(o("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",{rx:r,ry:r,xAxisRotation:0,largeArcFlag:d,sweepFlag:c,endX:a,endY:l}))},e.prototype.clip=function(){var t=this.__closestGroupOrSvg(),e=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),r=s(this.__ids),i=document.createElementNS("http://www.w3.org/2000/svg","g");t.removeChild(this.__currentElement),e.setAttribute("id",r),e.appendChild(this.__currentElement),this.__defs.appendChild(e),t.setAttribute("clip-path",o("url(#{id})",{id:r})),t.appendChild(i),this.__currentElement=i},e.prototype.drawImage=function(){var t,r,i,n,o,s,a,l,h,p,c,d,u,_,g=Array.prototype.slice.call(arguments),m=g[0],f=0,w=0;if(3===g.length)t=g[1],r=g[2],i=o=m.width,n=s=m.height;else if(5===g.length)t=g[1],r=g[2],i=g[3],n=g[4],o=m.width,s=m.height;else{if(9!==g.length)throw new Error("Inavlid number of arguments passed to drawImage: "+arguments.length);f=g[1],w=g[2],o=g[3],s=g[4],t=g[5],r=g[6],i=g[7],n=g[8]}if(a=this.__closestGroupOrSvg(),c=this.__currentElement,m instanceof e){for(h=(l=m.getSvg()).childNodes[0];h.childNodes.length;)_=h.childNodes[0].getAttribute("id"),this.__ids[_]=_,this.__defs.appendChild(h.childNodes[0]);p=l.childNodes[1],a.appendChild(p),this.__currentElement=p,this.translate(t,r),this.__currentElement=c}else"CANVAS"!==m.nodeName&&"IMG"!==m.nodeName||((d=document.createElementNS("http://www.w3.org/2000/svg","image")).setAttribute("width",i),d.setAttribute("height",n),d.setAttribute("preserveAspectRatio","none"),(f||w||o!==m.width||s!==m.height)&&((u=document.createElement("canvas")).width=i,u.height=n,u.getContext("2d").drawImage(m,f,w,o,s,0,0,i,n),m=u),d.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===m.nodeName?m.toDataURL():m.getAttribute("src")),a.appendChild(d),this.__currentElement=d,this.translate(t,r),this.__currentElement=c)},e.prototype.createPattern=function(t,r){var n,o=document.createElementNS("http://www.w3.org/2000/svg","pattern"),a=s(this.__ids);return o.setAttribute("id",a),o.setAttribute("width",t.width),o.setAttribute("height",t.height),"CANVAS"===t.nodeName||"IMG"===t.nodeName?((n=document.createElementNS("http://www.w3.org/2000/svg","image")).setAttribute("width",t.width),n.setAttribute("height",t.height),n.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===t.nodeName?t.toDataURL():t.getAttribute("src")),o.appendChild(n),this.__defs.appendChild(o)):t instanceof e&&(o.appendChild(t.__root.childNodes[1]),this.__defs.appendChild(o)),new i(o,this)},e.prototype.drawFocusRing=function(){},e.prototype.createImageData=function(){},e.prototype.getImageData=function(){},e.prototype.putImageData=function(){},e.prototype.globalCompositeOperation=function(){},e.prototype.arcTo=function(){},e.prototype.setTransform=function(){},window.C2S=e}();