single file with FilePicker
Save png from canvas element using File System Access API https://codepen.io/kitasenjudesign/pen/NWLGVWQ
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(400, 300); ctx.stroke(); ctx.fillStyle = "#f00"; ctx.beginPath(); ctx.arc(150, 150, 150, 0, 2 * Math.PI); ctx.fill(); //https://stackoverflow.com/questions/72615770/store-canvas-screenshot-to-local-filesystem-with-filesystem-api c.onclick = ()=>{ console.log("abc") c.toBlob(async function(result) { console.log(result); const options = { types: [ { description: 'Images', accept: { 'image/png': ['.png'], }, }, ], suggestedName: 'Screenshot.png', }; imgFileHandle = await window.showSaveFilePicker(options); console.log("Save File chosen"); const writable = await imgFileHandle.createWritable(); await writable.write(result); await writable.close(); }); }
multi files with DirectoryPicker
https://codepen.io/kitasenjudesign/pen/BaOoeXK
var c = document.getElementById("myCanvas"); var btn = document.getElementById("btn"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(400, 300); ctx.stroke(); ctx.fillStyle = "#f00"; ctx.beginPath(); ctx.arc(150, 150, 150, 0, 2 * Math.PI); ctx.fill(); /////////////////////////////////////////////// let dhandle; let idx = 0; btn.onclick = async ()=>{ console.log("click2") if(dhandle==null){ dhandle = await window.showDirectoryPicker() dhandle.requestPermission({ writable: true }) } await c.toBlob(async function(result) { //console.log(result); let fhandle = await dhandle.getFileHandle('filename'+idx+'.png', { create: true }); idx++; const writable = await fhandle.createWritable(); await writable.write(result); await writable.close(); }); }