ios 如何使用React.js让用户点击图片下载到照片？

0aydgbwb 于 2023-06-25 发布在 iOS

关注(0)|答案(3)|浏览(183)

我想实现的目标：
当用户单击按钮时，图像应保存到“照片”。
当前的行为是什么：
单击时，用户将被发送到一个新页面，其中只有该图像存在。

<a href={imageUrl} target="_blank">button</a>

点击后，系统会询问用户是否要下载图像。接受后，图像将保存在OneDrive中，而不是他们的照片中，这导致他们无法找到它。

export const downloadFile = (url: string, filename: string) => {
    fetch(url)
    .then(response => {
        response.blob().then(blob => {
            let url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = filename;
            a.click();
            a.remove();
        });
    });
}

有没有更好的方法让用户直接下载图片到他们的照片，而不是上面两个操作中的任何一个？
更新：
尝试使用mime-type和content-disposition，仍然发送到File而不是Photos。

当我在iOS上打开链接时，它会弹出一个如下对话框：

当我点击“查看”时，它会打开一个显示图像的页面。
当我点击“下载”时，它会直接下载到我的iCloud Drive，而不让我选择将其保存在我的照片中。

ios

来源：https://stackoverflow.com/questions/76478939/how-to-let-user-download-a-image-to-photos-on-click-with-react-js

3条答案

按热度按时间

pgky5nke1#

如果您的后端服务器定义的图像资源为Content-Disposition（rfc这里为https://datatracker.ietf.org/doc/html/rfc6266），您可以让浏览器触发window.location.assign("[image-url]")图像下载。
请注意，您必须根据后端服务器实现上的图像格式（.jpg、.png或其他）正确响应Content-Type头。

赞(0）回复(0）举报 2023-06-25

sgtfey8w2#

如果你只想下载一个图像，也许你可以试试这个代码

function onDownloadImage(src) {
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.src = src;
  img.onload = () => {
    // create Canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // for create tag anchor
    const a = document.createElement("a");
    a.download = `image-download`;
    a.href = canvas.toDataURL("image/png");
    a.click();
  };
}

然后你可以在你的组件中调用这个函数。例如：

return (
 <a href="#" onClick={() => onDownloadImage("url your image")}>Download Here ...</a>
)

赞(0）回复(0）举报 2023-06-25

5cnsuln73#

您可以使用一个名为File-saver的库。阅读更多关于here。它有一个saveAs()函数，你可以这样使用：

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

希望这对你有帮助。

赞(0）回复(0）举报 2023-06-25

我来回答

ios 如何使用React.js让用户点击图片下载到照片？

3条答案

相关问题

热门标签

最新问答