使用 JavaScript 将 SVG 转换为 PNG

男娘i 2023-10-02 13:52 36阅读 0赞

我过去一直使用 canvg 将 SVG 转换为 PNG，但是正如您从链接中看到的那样，它并不支持所有 SVG 功能。如果您使用 D3 或任何喜欢在 SVG 中工作的库，那么您可能会遇到一些不起作用的东西——在我的例子中是 textPath。

SVG 提供了沿任意路径绘制文本的功能，我需要在我的[Chord Snip][]附加组件中执行此操作，但我没有任何方法可以获取生成的 SVG 并创建一个图像，Google Sheets 可以将其用作嵌入图像。

理想情况下，我想使用浏览器来呈现 SVG 而不是 canvg，然后以某种方式获取光栅化结果以从中制作 png 图像，然后将其传递给 Google 表格。就是这样。

Dom 有一个 API 方法来创建一个对象——createObjectURL(svgtext)。API 因浏览器而异，但这里介绍了如何找到它。

<table style="margin-left:-18px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#dfefff;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">4</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:676.844px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#800080;">var</span> <span style="color:#000000;">domUrl</span> = <span style="color:#000000;">window</span><span style="color:#333333;">.</span><span style="color:#000000;">URL</span> <span style="color:#333333;">|</span><span style="color:#333333;">|</span> <span style="color:#000000;">window</span><span style="color:#333333;">.</span><span style="color:#000000;">webkitURL</span> <span style="color:#333333;">|</span><span style="color:#333333;">|</span> <span style="color:#800080;">window</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">if</span> <span style="color:#333333;">(</span><span style="color:#333333;">!</span><span style="color:#000000;">domUrl</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">throw</span> <span style="color:#800080;">new</span> <span style="color:#004ed0;">Error</span><span style="color:#333333;">(</span><span style="color:#008000;">"(browser doesnt support this)"</span><span style="color:#333333;">)</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个想法是从 svg 代码创建该对象，将其加载到图像元素，然后将该图像写入画布。然后我们可以使用 toDataURL() 来制作一个 base64 编码的 PNG 图像，我们就完成了。

第一步是创建 url，但除非 svg 代码定义了其命名空间，否则这将失败，因此我们将戳 svg 代码

做一个斑点

然后从 blob 创建 URL

接下来我们需要一个画布，但我们需要通过在 svg 代码中挖掘来推断出所需的画布大小。

<table style="margin-left:-18px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#dfefff;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">5</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:676.844px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">// figure out the height and width from svg text</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">match</span> = <span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">match</span><span style="color:#333333;">(</span><span style="color:#ff8000;">/height=\"(\d+)/m</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">height</span> = <span style="color:#000000;">match</span> <span style="color:#333333;">&amp;&amp; match[1] ? parseInt(match[1],10) : 200;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">match</span> = <span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">match</span><span style="color:#333333;">(</span><span style="color:#ff8000;">/width=\"(\d+)/m</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">width</span> = <span style="color:#000000;">match</span> <span style="color:#333333;">&amp;&amp; match[1] ? parseInt(match[1],10) : 200;</span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

现在我们可以创建一个画布元素来临时使用。我还将允许一些边距空间作为参数传递，因此画布需要足够大以容纳图像加上周围的任何填充。

<table style="margin-left:-18px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#dfefff;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">5</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:676.844px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">// create a canvas element to pass through</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">canvas</span> = <span style="color:#000000;">document</span><span style="color:#333333;">.</span><span style="color:#004ed0;">createElement</span><span style="color:#333333;">(</span><span style="color:#008000;">"canvas"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span> = <span style="color:#000000;">height</span>+<span style="color:#000000;">margin</span>*<span style="color:#ce0000;">2</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span> = <span style="color:#000000;">width</span>+<span style="color:#000000;">margin</span>*<span style="color:#ce0000;">2</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">ctx</span> = <span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#004ed0;">getContext</span><span style="color:#333333;">(</span><span style="color:#008000;">"2d"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

我需要一个新图像，当它加载时，我可以把它写到我的画布上。作为额外的一块糖，我将允许图像具有可选的背景填充 - 如果您有边距或透明输入，则很有用。如果它确实有一个，那么我需要第二个画布，可以用来设置第一个画布的样式。整个事情都包含在一个承诺中，因此可以通过传递 svg 图像的最终画布表示的 toDataUrl() 来解决它。

整个东西都可以这样使用。

<table style="margin-left:-18px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#dfefff;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">5</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">6</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">7</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:676.844px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#004ed0;">svgToPng</span> <span style="color:#333333;">(</span><span style="color:#000000;">svgCode</span> <span style="color:#333333;">,</span> <span style="color:#000000;">marginSize</span><span style="color:#333333;">,</span> <span style="color:#000000;">canvasFillColor</span><span style="color:#333333;">)</span> </span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#333333;">.</span><span style="color:#800080;">then</span> <span style="color:#333333;">(</span><span style="color:#800080;">function</span><span style="color:#333333;">(</span><span style="color:#000000;">data</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// do something with the encode b64 image</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#333333;">}</span><span style="color:#333333;">)</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#333333;">.</span><span style="color:#800080;">catch</span> <span style="color:#333333;">(</span><span style="color:#800080;">function</span> <span style="color:#333333;">(</span><span style="color:#000000;">err</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;<span style="color:#ff8000;">// do something with the error</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#333333;">}</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**编码**

我会在试用时报告浏览器兼容性，或者如果您试用它们，请告诉我。

<table style="margin-left:-25px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#dfefff;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">5</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">6</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">7</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">8</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">9</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">10</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">11</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">12</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">13</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">14</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">15</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">16</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">17</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">18</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">19</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">20</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">21</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">22</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">23</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">24</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">25</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">26</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">27</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">28</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">29</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">30</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">31</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">32</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">33</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">34</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">35</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">36</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">37</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">38</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">39</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">40</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">41</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">42</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">43</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">44</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">45</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">46</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">47</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">48</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">49</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">50</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">51</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">52</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">53</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">54</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">55</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">56</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">57</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">58</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">59</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">60</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">61</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">62</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">63</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">64</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">65</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">66</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">67</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">68</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">69</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">70</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">71</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">72</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">73</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">74</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">75</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">76</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">77</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">78</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">79</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:center;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#5499de;">80</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">/**</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;* converts an svg string to base64 png using the domUrl</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;* @param {string} svgText the svgtext</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;* @param {number} [margin=0] the width of the border - the image size will be height+margin by width+margin</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;* @param {string} [fill] optionally backgrund canvas fill</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;* @return {Promise} a promise to the bas64 png image</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;"><span style="color:#ff8000;">&nbsp;&nbsp;*/</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">svgToPng</span> = <span style="color:#800080;">function</span> <span style="color:#333333;">(</span><span style="color:#000000;">svgText</span><span style="color:#333333;">,</span> <span style="color:#000000;">margin</span><span style="color:#333333;">,</span><span style="color:#000000;">fill</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// convert an svg text to png using the browser</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">return</span> <span style="color:#800080;">new</span> <span style="color:#004ed0;">Promise</span><span style="color:#333333;">(</span><span style="color:#800080;">function</span><span style="color:#333333;">(</span><span style="color:#000000;">resolve</span><span style="color:#333333;">,</span> <span style="color:#000000;">reject</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">try</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// can use the domUrl function from the browser</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">domUrl</span> = <span style="color:#000000;">window</span><span style="color:#333333;">.</span><span style="color:#000000;">URL</span> <span style="color:#333333;">|</span><span style="color:#333333;">|</span> <span style="color:#000000;">window</span><span style="color:#333333;">.</span><span style="color:#000000;">webkitURL</span> <span style="color:#333333;">|</span><span style="color:#333333;">|</span> <span style="color:#800080;">window</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">if</span> <span style="color:#333333;">(</span><span style="color:#333333;">!</span><span style="color:#000000;">domUrl</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">throw</span> <span style="color:#800080;">new</span> <span style="color:#004ed0;">Error</span><span style="color:#333333;">(</span><span style="color:#008000;">"(browser doesnt support this)"</span><span style="color:#333333;">)</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// figure out the height and width from svg text</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">match</span> = <span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">match</span><span style="color:#333333;">(</span><span style="color:#ff8000;">/height=\"(\d+)/m</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">height</span> = <span style="color:#000000;">match</span> <span style="color:#333333;">&amp;&amp; match[1] ? parseInt(match[1],10) : 200;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">match</span> = <span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">match</span><span style="color:#333333;">(</span><span style="color:#ff8000;">/width=\"(\d+)/m</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">width</span> = <span style="color:#000000;">match</span> <span style="color:#333333;">&amp;&amp; match[1] ? parseInt(match[1],10) : 200;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">margin</span> = <span style="color:#000000;">margin</span> <span style="color:#333333;">|</span><span style="color:#333333;">|</span> <span style="color:#ce0000;">0</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// it needs a namespace</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">if</span> <span style="color:#333333;">(</span><span style="color:#333333;">!</span><span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">match</span><span style="color:#333333;">(</span><span style="color:#ff8000;">/xmlns=\"/m</span>i<span style="color:#333333;">)</span><span style="color:#333333;">)</span><span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">svgText</span> = <span style="color:#000000;">svgText</span><span style="color:#333333;">.</span><span style="color:#004ed0;">replace</span> <span style="color:#333333;">(</span><span style="color:#008000;">'&lt;svg '</span><span style="color:#333333;">,</span><span style="color:#008000;">'&lt;svg xmlns="http://www.w3.org/2000/svg" '</span><span style="color:#333333;">)</span> <span style="color:#333333;">;</span>&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// create a canvas element to pass through</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">canvas</span> = <span style="color:#000000;">document</span><span style="color:#333333;">.</span><span style="color:#004ed0;">createElement</span><span style="color:#333333;">(</span><span style="color:#008000;">"canvas"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span> = <span style="color:#000000;">height</span>+<span style="color:#000000;">margin</span>*<span style="color:#ce0000;">2</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span> = <span style="color:#000000;">width</span>+<span style="color:#000000;">margin</span>*<span style="color:#ce0000;">2</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">ctx</span> = <span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#004ed0;">getContext</span><span style="color:#333333;">(</span><span style="color:#008000;">"2d"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// make a blob from the svg</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">svg</span> = <span style="color:#800080;">new</span> <span style="color:#004ed0;">Blob</span><span style="color:#333333;">(</span><span style="color:#333333;">[</span><span style="color:#000000;">svgText</span><span style="color:#333333;">]</span><span style="color:#333333;">,</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">type</span><span style="color:#333333;">:</span> <span style="color:#008000;">"image/svg+xml;charset=utf-8"</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// create a dom object for that image</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">url</span> = <span style="color:#000000;">domUrl</span><span style="color:#333333;">.</span><span style="color:#004ed0;">createObjectURL</span><span style="color:#333333;">(</span><span style="color:#000000;">svg</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// create a new image to hold it the converted type</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">img</span> = <span style="color:#800080;">new</span> <span style="color:#800080;">Image</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// when the image is loaded we can get it as base64 url</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">img</span><span style="color:#333333;">.</span><span style="color:#000000;">onload</span> = <span style="color:#800080;">function</span><span style="color:#333333;">(</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// draw it to the canvas</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">ctx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">drawImage</span><span style="color:#333333;">(</span><span style="color:#800080;">this</span><span style="color:#333333;">,</span> <span style="color:#000000;">margin</span><span style="color:#333333;">,</span> <span style="color:#000000;">margin</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// if it needs some styling, we need a new canvas</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">if</span> <span style="color:#333333;">(</span><span style="color:#000000;">fill</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">styled</span> = <span style="color:#000000;">document</span><span style="color:#333333;">.</span><span style="color:#004ed0;">createElement</span><span style="color:#333333;">(</span><span style="color:#008000;">"canvas"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styled</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span> = <span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styled</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span> = <span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#800080;">var</span> <span style="color:#000000;">styledCtx</span> = <span style="color:#000000;">styled</span><span style="color:#333333;">.</span><span style="color:#004ed0;">getContext</span><span style="color:#333333;">(</span><span style="color:#008000;">"2d"</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">save</span><span style="color:#333333;">(</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#000000;">fillStyle</span> = <span style="color:#000000;">fill</span><span style="color:#333333;">;</span>&nbsp;&nbsp; </span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">fillRect</span><span style="color:#333333;">(</span><span style="color:#ce0000;">0</span><span style="color:#333333;">,</span><span style="color:#ce0000;">0</span><span style="color:#333333;">,</span><span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span><span style="color:#333333;">,</span><span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">strokeRect</span><span style="color:#333333;">(</span><span style="color:#ce0000;">0</span><span style="color:#333333;">,</span><span style="color:#ce0000;">0</span><span style="color:#333333;">,</span><span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">width</span><span style="color:#333333;">,</span><span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#000000;">height</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">restore</span><span style="color:#333333;">(</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">styledCtx</span><span style="color:#333333;">.</span><span style="color:#004ed0;">drawImage</span> <span style="color:#333333;">(</span><span style="color:#000000;">canvas</span><span style="color:#333333;">,</span> <span style="color:#ce0000;">0</span><span style="color:#333333;">,</span><span style="color:#ce0000;">0</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">canvas</span> = <span style="color:#000000;">styled</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// we don't need the original any more</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">domUrl</span><span style="color:#333333;">.</span><span style="color:#004ed0;">revokeObjectURL</span><span style="color:#333333;">(</span><span style="color:#000000;">url</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// now we can resolve the promise, passing the base64 url</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#004ed0;">resolve</span><span style="color:#333333;">(</span><span style="color:#000000;">canvas</span><span style="color:#333333;">.</span><span style="color:#004ed0;">toDataURL</span><span style="color:#333333;">(</span><span style="color:#333333;">)</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff8000;">// load the image</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#000000;">img</span><span style="color:#333333;">.</span><span style="color:#000000;">src</span> = <span style="color:#000000;">url</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span> <span style="color:#800080;">catch</span> <span style="color:#333333;">(</span><span style="color:#000000;">err</span><span style="color:#333333;">)</span> <span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#004ed0;">reject</span><span style="color:#333333;">(</span><span style="color:#008000;">'failed to convert svg to png '</span> + <span style="color:#000000;">err</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#333333;">}</span><span style="color:#333333;">)</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#2a2a2a;"><span style="background-color:#ffffff;"><span style="color:#000000;">&nbsp;&nbsp;<span style="color:#333333;">}</span><span style="color:#333333;">;</span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[Chord Snip]: https://ramblings.mcpher.com/add-ons/chord-snip