html2canvas在iOS Safari上下載圖像客戶端

Question

小提琴/筆 ： https : //codepen.io/michaelsboost/pen/bGbLpbX

問題 ： html2canvas錯誤： Failed to load resource: the server responded with a status of 404 () html2canvas.js.map僅在iOS Safari上顯示。 但是，它在台式機和Android上運行良好。

屏幕截圖錯誤 ：

Javascript：

// Variables
var str, startTime, imageURL, first, next,
    workoutlog = document.querySelector("[data-output=workoutlog]"),
    testString = "Date: 9:6:2019\nStart time: 3:10:57 PM\nObjective: 17 pushups a minute for 1 hour\nGoal: 1020 pushups in 1 hour\nCompleted: 1020 pushups\n60 minutes have gone by\n0 pushups remaining\n0 minutes remaining\nTimes Paused: 0\nFinished at: 4:10:56 PM",
    openInNewTab = function(url) {
      str = testString;
      str = str.substr(1, str.length);
      str = str.replace(/%20/g, " ");

      startTime = str.substring(0, str.indexOf('\\n'));
      first = str.indexOf('\\n');
      next  = str.indexOf('\\n', first + 1);
      dateTime  = startTime.replace(/Date: /g, "");
      startTime = str.substring(str.indexOf('Finished at: '));
      startTime  = startTime.replace(/Finished at: /g, "");

      var a = document.createElement("a");
      a.href = url;
      a.download = "workout_log " + dateTime + " " + startTime;
      a.click();
    };

// set sample log
workoutlog.innerHTML = testString.replace(/\n/g, "<br>");

// run html2canvas
html2canvas(document.querySelector(".grablog")).then(function(canvas) {
  // download canvas image
  imageURL = canvas.toDataURL();
  openInNewTab(imageURL);
});

研究方向

1. 我知道，因為腳本就在結束正文標簽之前，所以不需要添加DOMContentLoaded ，因為內容已經存在。 （但是我還是嘗試了一下，只是為了看看它是否能夠解決問題，否則就無法解決）。
2. 我已經知道HTTP狀態代碼404指示服務器找不到請求的文件或資源。 但是，這是一個DataURL圖像，因此沒有服務器。 我在Google上搜索了幾天，以找到與我的問題有關的解決方案，但是我發現的所有事情都與將圖像上傳到服務器並以這種方式保存有關。

問題：

1. 為什么下載在台式機和Android上有效，但在iOS上無效？
2. 對於不需要將圖像上傳到服務器的 iOS，有什么解決方法可用於解決此問題？

Answer 1

經過一番研究，我發現download屬性在台式機和android上有效但在iOS上無效的原因是因為iOS沒有文件系統。 另一種方法是在瀏覽器中使用正確的mime類型打開文件，以便它可以顯示其內容（然后用戶可以根據需要手動下載它）。
來源1 來源2 來源3

var img = new Image();
img.crossOrigin = "Anonymous";
img.id = "getshot";
img.src = imageURL;
document.body.appendChild(img);

var a = document.createElement("a");
a.href = getshot.src;
a.download = "workout_log " + dateTime + " " + startTime + ".png";
a.click();
document.body.removeChild(img);