用户保存图像后 Safari 重新加载页面

Question

我尝试下载 blob 中的图像：创建一个 link 元素，设置下载和 href 属性。但是对于两个不同的应用程序，相同的脚本有不同的行为：在最简单和轻量级的应用程序中，用户确认下载后没有页面重新加载，图像已经下载。但另一方面 - 下载图像后不需要重新加载。我能以某种方式避免这种情况吗？仅在 Safari 移动浏览器上出现问题。

下面是我使用的片段：

const image = 'data:image/jpeg;base64,' + event.detail;
fetch(image)
  .then(res => res.blob())
  .then(blob => {
     let file = new File([blob], 'MyImageName.jpeg', {type: blob.type, lastModified: Date.now()});
     files.push(file);

     if (
       navigator.canShare && 
       navigator.canShare({ files }) && 
       navigator.userAgent.indexOf("YaBrowser") == -1
     ){
       //This part works well
       ...
     } else {
       //This part works not as expected in Safari
       downloadLink.download = "MyImageName.jpg"
       downloadLink.innerHTML = "Download";
       downloadLink.href = image;
     }
  });

此外，确认消息中的“查看”按钮不起作用，只是重新加载页面。

Answer 1

这是 Safari 的错误。通过创建图像预览并为用户添加使用原生 Safari 图像功能的提示解决：

const image = 'data:image/jpeg;base64,' + event.detail;
fetch(image)
  .then(res => res.blob())
  .then(blob => {
     const preview = document.querySelector('#photoPreview');
     preview.src = image;

     let file = new File([blob], 'MyImageName.jpeg', {type: blob.type, lastModified: Date.now()});
     files.push(file);

     if (
       navigator.canShare && 
       navigator.canShare({ files }) && 
       navigator.userAgent.indexOf("YaBrowser") == -1
     ){
       ...
     } else {
       btnShareDownload.innerHTML = "Tap and hold image to save or share";
     }
});

用户保存图像后 Safari 重新加载页面

Safari reload page after saving image by user

javascript

safari

mobile-safari