Electronic upload attribute issue

Question

Following my previous question here ,

I have a desktop application using the Electron and Javascript framework, where I convert an HTML5 canvas to JPEG using:

<a id="download" download="Path.jpg">Download JPG</a> 

then

 function download(){ var dt = canvas.toDataURL('image/jpeg'); this.href=dt; } document.getElementById('download').addEventListener('click', download, false); 

This updates my entire application. How do I change this behavior so that the page does not refresh when I click on the download attribute?

Answer 1

I can think of these two snippets, one of which uses blob and one that uses a loading element. external library: FileSave.js

 // this one use FileSaver.js library canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); }); // or this way using download element. // here you can encode your image-data and then send it. var download = document.getElementById('download'); download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(imageData)); download.setAttribute('download', 'file.jpg'); 

I also found this now, an electron-specific solution: Saving files locally using an electron

Answer 2

Edit your anchor bit tag

 <a id="download" download="Path.jpg" target="_blank" onClick="download();">Download JPG</a> 

And then your download function

 function download(event){ event.currentTarget.href = canvas.toDataURL('image/jpeg'); } 

This can help