html2canvas 在桌面上完美運行，但在其中一種情況下無法在手機上運行

Question

在我的頁面上，我正在截屏由按鈕按下觸發的網頁的兩個部分。 在桌面上，它們都可以正常工作。 在電話上，一個也可以工作，但另一個不行。 這是用於觸發第二個的代碼：

    html2canvas(document.getElementById("emotion-result-table")).then(canvas => {
      this.imageTable = canvas.toDataURL("image/png")
    });

而且我檢查過then永遠不會被調用，但也不會引發任何錯誤。 這是我要截屏的一些代碼：

<div id="emotion-result-table" sex="male" data-v-64636664="" data-v-4815f62e="">
<div data-v-64636664="">
  <div className="flex frame justify-around items-center" data-v-64636664="">
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/happy.b68bbc93.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664="">
    </div>
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/sad.d1999e7e.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664=""></div>
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/angry.69f25221.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664="">
    </div>
  </div>
</div>
<div data-v-64636664="">
  <div className="flex frame justify-around items-center" data-v-64636664="">
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/fearful.5636905b.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664="">
    </div>
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/disgusted.3fe55874.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664="">
    </div>
    <div className="flex justify-center relative-position" data-v-64636664="">
      <div className="user-image" data-v-64636664=""
           style="background-image: url(&quot;data:image/png;base64,CC&quot;); background-size: cover; background-position: center top;"></div>
      <img src="/img/surprised.d06d4934.svg" className="emotion-image absolute" alt="Emotion image" data-v-64636664="">
    </div>
  </div>
</div>
</div>

當然，我刪除了帶有圖像的字符串，因此它變得更具可讀性。

不確定是否相關，但我還發現在控制台的電話上出現錯誤： Maxium call stack size exceeded which is not present on the desktop

Answer 1

好的，我在這里找到了一個解決方案是 github 問題：

https://github.com/niklasvh/html2canvas/issues/1858

TLDR：我在 css 中使用背景圖像，它在桌面上運行良好。 但是html2canas在手機上還是不支持這個