I'm trying to build a function that lets me select part of a webpage containing text and images, then copy it into Obsidian. The text copies successfully, but the images are only treated as links or don't appear at all. How can I make the images copy as actual files or embedded attachments instead of just preserving their remote URLs?
3 Answers
For several images, rebuilding the clipboard payload can get complicated, and support varies between browsers and applications. A simpler approach is to copy the text and image URLs, then use an Obsidian workflow or plugin that downloads remote images into the vault and rewrites the note to use local attachments. That is often easier than trying to make the clipboard carry every image directly.
The clipboard usually contains text and HTML, but an HTML element normally stores only the image URL—not the image data itself. A practical solution is to treat this as an import process: read the selected HTML, find each image URL, download the images as Blobs, save them in Obsidian’s attachments folder, and generate Markdown that points to those local files. Start by getting one image working, then add support for multiple images and the surrounding text.
Exactly—this is more like a small browser extension or import pipeline than a basic copy-and-paste script.
Using document.execCommand('copy') only copies the formats already available in the selection. To place actual image data on the clipboard, you can use the asynchronous Clipboard API, fetch the image as a Blob, and write an explicit image representation with ClipboardItem. You may also include a text/html representation, but browser permissions and cross-origin restrictions can make this unreliable.
That makes sense. I’ll try downloading and saving a single image first before handling the whole selection.