下面的代码将文件保存到用户的磁盘上:
function handleSaveImg(event){
const image = canvas.toDataURL();
const saveImg = document.createElement('a');
saveImg.href = image;
saveImg.download= saveAs;
saveImg.click();
}
if(saveMode){
saveMode.addEventListener("click", handleSaveImg);
}
它使用一个<a>
标签来保存一些数据(在我的例子中,是从<canvas>
).
但这会直接保存到磁盘,不会提示询问将文件保存在哪里,也不会询问以哪个名称保存。
我想强制显示“另存为”对话框,以便用户必须选择保存该文件的位置。
有什么办法吗?
是的,它的名字叫showSaveFilePicker() https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker.
这是文件系统访问 https://wicg.github.io/file-system-access/API,目前仍处于草案阶段,但已在所有 Chromium 浏览器中公开。
这个 API 非常强大,可以让您的代码直接访问用户的磁盘,因此它仅在安全上下文中可用。
一旦此方法返回的 Promise 解析,您将可以访问一个句柄,您可以在其中访问一个 WritableStream,您可以向其中写入数据。
这比download
,但它也更强大,因为您可以作为流写入,不需要将整个数据存储在内存中(想想录制视频)。
在你的情况下,这会给
async function handleSaveImg(event){
const image = await new Promise( (res) => canvas.toBlob( res ) );
if( window.showSaveFilePicker ) {
const handle = await showSaveFilePicker();
const writable = await handle.createWritable();
await writable.write( image );
writable.close();
}
else {
const saveImg = document.createElement( "a" );
saveImg.href = URL.createObjectURL( image );
saveImg.download= "image.png";
saveImg.click();
setTimeout(() => URL.revokeObjectURL( saveImg.href ), 60000 );
}
}
这里有一个现场演示 https://save-canvas-as.glitch.me/,(以及code https://glitch.com/edit/#!/save-canvas-as?path=script.js%3A21%3A12).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)