html2canvas 在 iOS Safari 上下载图像客户端

Question

Fiddle/Pen: 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);
});

研究:

我知道因为脚本就在结束正文标签之前，所以添加 DOMContentLoaded 是不必要的，因为内容已经存在。（但是我确实尝试过它只是为了看看它是否能解决问题但它没有）。
我已经知道 HTTP 状态代码 404 表示服务器找不到请求的文件或资源。然而，这是一个 DataURL 图像，因此没有服务器。我已经搜索 Google 几天以找到与我的问题相关的解决方案，但我找到的所有内容都与 uploading the image on a server 相关并以这种方式保存。

问题：

为什么下载可以在桌面和 android 而不是 iOS？
我可以使用哪些解决方法来解决 iOS 不需要 uploading the image to a server 的问题？

Answer 1

经过一些研究，我发现下载属性在桌面和 android 而不是 iOS 的原因是因为 iOS 没有文件系统。另一种方法是使用正确的 mime 类型在浏览器上打开文件，以便它可以显示其内容（然后用户可以根据需要手动下载它）。
source 1 source 2 source 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);

html2canvas 在 iOS Safari 上下载图像客户端

html2canvas Download Image Client-Side on iOS Safari

javascript

http-status-code-404

html2canvas