Fix styles in PNG render

src/Deck.vue

@@ -67,9 +67,4 @@
  .deck svg {
    white-space: initial;
  }
-
- .deck svg p {
-   margin-top: 0;
-   margin-bottom: .5em;
- }
 </style>

src/Editor.vue

@@ -114,9 +114,25 @@
      upload() {
        this.uploading = true;
 
+       // TODO: remove this nasty hack
+       function bindStyles(doc) {
+         console.log(doc);
+         // get existing styles from CSS...
+         let style = Array.from(document.styleSheets[0].rules)
+                          .map(rule => rule.cssText)
+                          .join('\n');
+         // ...and jam them into a <style> in each foreignObject
+         doc.querySelectorAll('foreignObject')
+            .forEach(o => {
+              let styleElement = o.appendChild(document.createElement('style'));
+              styleElement.innerHTML = style;
+            });
+       }
+
        let node = this.$refs.deck.$el;
-       html2canvas(node, {scale: 2, width: node.scrollWidth,
-                          backgroundColor: 'black'})
+       html2canvas(node, {scale: 1, width: node.scrollWidth,
+                          backgroundColor: 'black',
+                          onclone: bindStyles})
          .then(canvas => canvas.toDataURL("image/png"))
          .then(image =>
            // POST the inputed json to the server
@@ -127,7 +143,6 @@
                deck: this.deckInfo,
                _id: this.deckID === 'new' ? undefined : this.deckID,
                image: image,
-               css: document.styleSheets[0].href,
              })}))
          .then(r => r.json())
          .then(j => {

src/template/hero/HTMLEmbed.vue

@@ -0,0 +1,12 @@
+<template>
+  <foreignObject>
+    <div class="htmlEmbed" v-html="html"> </div>
+  </foreignObject>
+</template>
+
+<script>
+ export default {
+   name: 'HTMLEmbed',
+   props: ['html'],
+ }
+</script>

src/template/hero/Hero.vue

@@ -7,6 +7,7 @@
 
 <script>
  import fs from 'fs';
+ import HTMLEmbed from './HTMLEmbed.vue';
  import VRuntimeTemplate from "v-runtime-template";
 
  let propTypes = {
@@ -40,7 +41,7 @@
  export default {
    name: 'HeroCharacter',
    props: ['type', 'card'],
-   components: {VRuntimeTemplate},
+   components: {VRuntimeTemplate, HTMLEmbed},
 
    data() {
      return {
@@ -56,3 +57,10 @@
    },
  }
 </script>
+
+<style>
+ .htmlEmbed p {
+   margin-top: 0;
+   margin-bottom: .5em;
+ }
+</style>

src/template/hero/character-back.svg

@@ -4,7 +4,5 @@
   <path d="m9.498 243.5h162v-234h-162z" fill="#fff" stroke="#000" stroke-miterlimit="10"/>
   <path d="m9.5 243.5h162v-234h-162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
   <path d="m168.08 239.87h-154.91v-52.371h154.91z" fill="#cfd1d4" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10"/>
-  <foreignObject x="16" y="194" width="150" height="20" fill="#000000" font-family="'RedStateBlueState BB'" font-size="8px">
-    <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.incapacitated"> </div>
-  </foreignObject>
+  <HTMLEmbed x="16" y="194" width="150" height="20" fill="#000000" font-family="'RedStateBlueState BB'" font-size="8px" :html="card.incapacitated"> </HTMLEmbed>
 </svg>

src/template/hero/character.svg

@@ -28,8 +28,6 @@
   <path d="m30.672 21.242h-1.6094v-6.4844h0.81641v5.8086h0.79297z"/>
   <text x="12.953" y="93.105858" fill="#ffffff" font-family="'Armor Piercing'" font-size="29px" stroke="#000000"> {{card.hp }} </text>
   <text x="90.2556" y="220.35289" font-family="'RedStateBlueState BB'" font-size="10px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.power }} </text>
-  <foreignObject x="21.452999" y="222" width="137.06" height="14.694" font-family="'RedStateBlueState BB'" font-size="8px">
-    <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.powerText"> Power Text </div>
-  </foreignObject>
+  <HTMLEmbed x="21.452999" y="222" width="137.06" height="14.694" font-family="'RedStateBlueState BB'" font-size="8px" :html="card.powerText"> </HTMLEmbed>
   <text x="168.46541" y="247.8423" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">Art By {{ card.artist }} </text>
 </svg>

src/template/hero/deck.svg

@@ -322,9 +322,7 @@
       <text x="154.03" y="30.44" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle"> {{ card.hp }} </text>
     </g>
     <image v-bind:xlink:href="card.art" x="21" y="34" width="162px" height="121px" preserveAspectRatio="xMidYMid"/>
-    <foreignObject x="14.5" y="160" width="152" height="48.5" font-family="'RedStateBlueState BB'" font-size="8.7px">
-      <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.text"> Text Here </div>
-    </foreignObject>
+    <HTMLEmbed x="14.5" y="160" width="152" height="48.5" font-family="'RedStateBlueState BB'" font-size="8.7px" v-bind:html="card.text"> </HTMLEmbed>
     <text x="72.514046" y="222" font-size="6.8px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.quote }} </text>
     <text x="101.80201" y="230" font-size="5.8px" text-align="end" text-anchor="end">- {{ card.quoteCitation }} </text>
     <text x="168.4621" y="247.85452" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end"> Art By {{ card.artist }} </text>