adds copy images (local and remote)

[luckman212]

feature add: right click to copy image to clipboard

This is some very hacky code. 😱 I'm sorry.

Notes

• there MUST be a more efficient way to do this. The image data is already there on the canvas, so going out and re-fetching it from the filesystem, or worse, from a remote webserver is silly
• this most likely won't work in the mobile app, but at least on iOS it isn't needed-you can already long press and copy images
• maybe contents.copyImageAt(x,y) -- (see here) is the right solution?
• so far only tested on macOS 11.4, Obsidian 0.12.10

Related research links:

• nativeImage.createFromURL(url) · Issue #19031 · electron/electron
• Copy images to the clipboard in the Electron app (c11fa4c4) · Commits · Conor Matthews / CA4106 Team 12 · GitLab
• javascript - How to save an image drawn on the canvas in Electron.js - Stack Overflow
• javascript - Is it possible to copy a canvas image to the clipboard? - Stack Overflow
• javascript - React - how to copy an image to clipboard? - Stack Overflow
• Lightcord/clipboard.js at master · Lightcord/Lightcord

thank you:
https://stackoverflow.com/questions/17124053/node-js-get-image-from-web-and-encode-with-base64

[luckman212]

Hi @NomarCub -- I have been working on this for a bit. Please help me clean this up if you have any ideas!

[NomarCub]

Hi! I'd also like to have this feature, but I don't have much free time for this now, and this is not within my expertise. But I'll help as I can.
Before merging the following should be addressed:

• use let or const instead of var
• a fully working mobile version would be nice, but at least fix functionality broken by this (see below)
• use import instead of require (this may help with mobile too)
• use casting consistently (as or <>)
• combine the http and https switch branches
• revert to the old README.md and expand it if needed

The plugin doesn't load for me on Android, here's the error:

Plugin failure: copy-url-in-preview TypeError: Cannot destructure property 'clipboard' of 'require(...)' as it is undefined.
	at anonymous (eval at <anonymous> (app.js:1), <anonymous>:10:9)
	at t.<anonymous> (app.js:1)
	at app.js:1
	at Object.next (app.js:1)
	at s (app.js:1)

[luckman212]

Ok @NomarCub I'll try to clean those up a bit. This was more of a POC to see if copy image was possible. I don't have an Android device to test with but I will see if I get the same errors on iOS and try to fix.

[luckman212]

I think I'm on the right path but I'm hitting a wall on this and have posted to the Developers/API forum asking for some help. I'm continuing to try!

Fixing right click → copy image function in plugin - Developers & API - Obsidian Forum

[luckman212]

Update: rewritten PR #3 is up... should be quite a bit better than the ugliness above (thanks @sissilab)