I have a
<div draggable><img src="https://example.com/test.webp" alt="testing" /></div>
element on a page. By default on MacOS (Chrome or Safari), if you drag the image from the browser to your desktop then https://example.com/test.webp gets saved. What I'd like to do is change what gets saved to a different file let's say https://example.com/test.png WITHOUT having to do some src switching on dragstart then reverting back on dragend type logic.
I looked at everything in the MDN docs for dragging an image and I couldn't get anything to work. I'd rather not deal with base64 either. The one approach that got sort of close is to set the datatransfer type on dragstart:
event.dataTransfer.setData('DownloadURL', 'image/png:test.png:https://example.com/test.png');
I think that above statement is for Chrome only? Also, I get a Chrome error saying my organisation has blocked the file transfer due to unmet security policy constraints. Is that maybe because my locally running dev site is on http://localhost and the file path is https as well as not being same origin?
All my image urls are .webp for speed/performance so I'd rather not change them to their .png versions. Only when a user drags to the desktop do I want the png saved.
The only example I've seen that accomplishes this task is from Electron.js here: https://www.electronjs.org/docs/latest/tutorial/native-file-drag-drop/ but I have no idea how they got it to work.