gpt4 book ai didi

javascript - 在指向图像文件的 window.location 上调用另存为对话框

转载 作者:行者123 更新时间:2023-12-05 07:59:08 27 4
gpt4 key购买 nike

我有这行 javascript 可以在页面上打开图像数据

window.location.href = canvas.toDataURL('image/jpeg');

如何让它调用另存为对话框/下载图像,以便访问者可以在图像加载后立即保存图像?

目前用户需要右击>save image as来保存图片。自动调用另存为对话框会很好。

我发现这个可能有用 downloading file with save as dialog box in jsp...how to prompt user for save,view cancel dialog instead of directly opening image

但我不知道如何在页面/图像加载后添加 response.setheader。我试过了

window.location.href = canvas.toDataURL('image/jpeg');
response.setHeader('Content-Disposition', 'attachment; filename=' + <?php the_title(); ?> + '.jpg');

但是没有用。

谢谢

最佳答案

你可以吗download a 元素的属性。它会导致 anchor 元素调用下载对话框而不是在浏览器中加载目标内容。根据 caniuse,目前 IE 和 Safari 不支持它.

以下示例显示了临时隐藏 a 元素的就地创建。使用 click() 方法激活下载对话框。

var url = 'data:image/png;base64,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';
var button = document.querySelector('button');
button.addEventListener('click', function() {
var a = document.createElement('a');
a.href = url;
a.download = 'file-name.png';
a.style = 'display: none';
button.parentNode.appendChild(a);
a.click();
a.remove();
});
<button>download</button>

关于javascript - 在指向图像文件的 window.location 上调用另存为对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22574443/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com