Share button not working in template #1

New Issue

Aditya-ds-1806 · 2025-12-02T17:49:59Z

Aditya-ds-1806 commented

2025-12-02 17:49:59 +00:00

This is the error trace.

SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at blob (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:186:54)
    at new Promise (<anonymous>)
    at screenshotDOM (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:186:28)
    at async shareDOM (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:360:22)
    at async el.onclick (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:551:9)

I suspect this is happening due to <foreignobject/> presence in the SVG getting constructed. I can see two options:

Parse the DOM node to extract relevant data like we are doing now, but instead build the SVG with native tags like <text/> etc instead of <foreignobject>. But can potentially break when the layout gets changed, although rare.
Use something like html2canvas but introduce a dependency.

Option 2 I feel is more robust but too heavy for our limited use case, I am inclined towards option 1. What do you think? I am also pasting a sample SVG output via Option 1, not so bad!

<svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240">
  <style>
    .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 10; ry: 10; }
    .headword {
      font-family: "Noto Sans Kannada", "Noto Sans", sans-serif;
      font-size: 28px;
      font-weight: 700;
      fill: #111827;
    }
    .pron {
      font-family: "Noto Sans", sans-serif;
      font-size: 15px;
      fill: #6b7280;
    }
    .pos {
      font-family: "Noto Sans", sans-serif;
      font-size: 15px;
      font-weight: 600;
      fill: #374151;
    }
    .def {
      font-family: "Noto Sans", sans-serif;
      font-size: 16px;
      fill: #111827;
    }
    .num {
      font-family: "Noto Sans", sans-serif;
      font-size: 16px;
      fill: #6b7280;
    }
  </style>

  <!-- Card background -->
  <rect x="8" y="8" width="704" height="224" rx="10" ry="10" class="card"/>

  <!-- Content -->
  <g transform="translate(32,36)">
    <!-- Headword -->
    <text class="headword" x="0" y="0">ಹೆಸರು</text>

    <!-- Pronunciation -->
    <text class="pron" x="0" y="30">♪ hesaru</text>

    <!-- POS -->
    <text class="pos" x="0" y="72">(Noun)</text>

    <!-- Definition 1 -->
    <text class="num" x="0" y="112">1.</text>
    <text class="def" x="24" y="112">
      <tspan x="24" dy="0">the plant Phaseolus aureus ( = P. radiatus) of Papilionaceae family,</tspan>
      <tspan x="24" dy="22">grown for its pea.</tspan>
    </text>

    <!-- Definition 2 -->
    <text class="num" x="0" y="160">2.</text>
    <text class="def" x="24" y="160">its pea, widely used as food.</text>
  </g>
</svg>

This is the error trace. ``` SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. at blob (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:186:54) at new Promise (<anonymous>) at screenshotDOM (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:186:28) at async shareDOM (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:360:22) at async el.onclick (_bundle.js?f=autocomp.js&f=share.js&f=main.js&f=alar.js&v=b50cb4125e:551:9) ``` I suspect this is happening due to `<foreignobject/>` presence in the SVG getting constructed. I can see two options: - Parse the DOM node to extract relevant data like we are doing now, but instead build the SVG with native tags like `<text/>` etc instead of `<foreignobject>`. But can potentially break when the layout gets changed, although rare. - Use something like `html2canvas` but introduce a dependency. Option 2 I feel is more robust but too heavy for our limited use case, I am inclined towards option 1. What do you think? I am also pasting a sample SVG output via Option 1, not so bad! ```html <svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240"> <style> .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 10; ry: 10; } .headword { font-family: "Noto Sans Kannada", "Noto Sans", sans-serif; font-size: 28px; font-weight: 700; fill: #111827; } .pron { font-family: "Noto Sans", sans-serif; font-size: 15px; fill: #6b7280; } .pos { font-family: "Noto Sans", sans-serif; font-size: 15px; font-weight: 600; fill: #374151; } .def { font-family: "Noto Sans", sans-serif; font-size: 16px; fill: #111827; } .num { font-family: "Noto Sans", sans-serif; font-size: 16px; fill: #6b7280; } </style>  <rect x="8" y="8" width="704" height="224" rx="10" ry="10" class="card"/>  <g transform="translate(32,36)">  <text class="headword" x="0" y="0">ಹೆಸರು</text>  <text class="pron" x="0" y="30">♪ hesaru</text>  <text class="pos" x="0" y="72">(Noun)</text>  <text class="num" x="0" y="112">1.</text> <text class="def" x="24" y="112"> <tspan x="24" dy="0">the plant Phaseolus aureus ( = P. radiatus) of Papilionaceae family,</tspan> <tspan x="24" dy="22">grown for its pea.</tspan> </text>  <text class="num" x="0" y="160">2.</text> <text class="def" x="24" y="160">its pea, widely used as food.</text> </g> </svg> ``` <img width="819" alt="image.png" src="attachments/a82dac3f-61e3-40ea-bb55-e2c94ac051ba">

image.png

157 KiB

Aditya-ds-1806 referenced a pull request that will close this issue

2025-12-02 18:18:53 +00:00

fix: logic to construct SVG #2

knadh closed this issue

2025-12-13 04:46:05 +00:00

knadh referenced this issue from a commit

2025-12-13 04:46:07 +00:00

fix: logic to construct SVG (#2)

Sign in to join this conversation.