如何保存图像并下载到ReactJS中？
如何保存图像并下载到ReactJS中？
提问于 2021-08-16 10:22:19
我有一个显示图片库的应用程序。在每一张照片下面都有一个按钮，当点击该按钮时，应该将照片保存在用户的计算机上。不幸的是，照片在下载时被保存为HTML文档。这就是为什么下载后不能打开它们的原因。这些照片存储在一个静态上传文件夹中，该文件夹使用nodejs附加到该项目。如何下载照片以便以正确的格式保存？
我已经尝试使用download属性，方法是将照片放在a标记下，如下所示：
<a href={file.path} download>download</a>` or `<a href={file.path} download={file.name}>download</a>。
我也尝试使用file-saver模块，但没有得到积极的结果。使用此解决方案，图像还保存为HTML文档：
const Gallery = () => {
//
const downloadImage = (file) => {
saveAs(
`http://localhost:3000${file.path}`,
file.name + '.' + file.type
)
}
//
return (
<button onClick={downloadImage(currentFile)} type='button'> download </button>
)
}在react路由器-dom中，我没有路由设置，所以我可以在点击照片后直接预览照片。
Stack Overflow用户
发布于 2021-08-16 10:58:35
我认为这可以帮助您，调用下载函数，然后通过图像url、图像名下载和类型的图像。
function toDataURL(url) {
return fetch(url)
.then((response) => {
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
});
}
async function download(url, name = "download", type = "png") {
const a = document.createElement("a");
a.style.display = "none";
a.href = await toDataURL(url);
a.download = name + "." + type;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}代码源=> https://stackoverflow.com/a/56041886/11115457
代码描述
首先创建临时链接(不可见)，然后向服务器发送获取图像数据的请求，然后将图像数据设置为我们创建的链接href，然后添加到主体的链接，我们需要使用js对该链接进行虚拟单击，最后从body中删除一个标记。
完成，图像下载..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68801171
复制相关文章
相似问题
腾讯云开发者
