Suggestion: copy image from ViewContainer

[luckman212]

@sissilab This is a great plugin! Really slick.

I was trying to borrow some of your techniques to implement a "Copy Image" function (see this fork/PR: NomarCub/obsidian-copy-url-in-preview#2) but I don't think it's directly possible. I wonder if you have any idea on how to implement a "copy image to clipboard" function?

I believe the key would be to create a hidden BrowserWindow or canvas object and then use the webContents → copyImageAt() API method?

[luckman212]

A similar (but not quite identical) bit of code is https://github.com/lynchjames/obsidian-mind-map/blob/main/src/copy-image.ts#L3

export function copyImageToClipboard(svg: SVGElement) {
    const canvas = createCanvas(svg); 
    const img = generateImage(svg, canvas, () => { 
        canvas.toBlob((blob: any) => { 
            const item = new ClipboardItem({ "image/png": blob });
            navigator.clipboard.write([item]); 
            new Notice('Screenshot copied to the clipboard.')
        });
    });
}

[sissilab]

@sissilab This is a great plugin! Really slick.

I was trying to borrow some of your techniques to implement a "Copy Image" function (see this fork/PR: NomarCub/obsidian-copy-url-in-preview#2) but I don't think it's directly possible. I wonder if you have any idea on how to implement a "copy image to clipboard" function?

I believe the key would be to create a hidden BrowserWindow or canvas object and then use the webContents → copyImageAt() API method?

Hi, you can try the following code, and I have tested it.
The image will be copied to your clipboard, and you can paste it in the Obsian edit area.

export function copyImage(imgSrc: string) {
    let image = new Image();
    image.src = imgSrc;
    image.crossOrigin = 'anonymous';
    image.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        // const imgBase64 = canvas.toDataURL("image/png");
        // console.log('imgBase64', imgBase64);
        canvas.toBlob((blob: any) => {
            const item = new ClipboardItem({ "image/png": blob });
            navigator.clipboard.write([item]);
            console.log('copy end!');
        });
    };
}

[luckman212]

@sissilab This is amazing! I spent an entire day trying to figure this out. Your code works and is so much more elegant than what I came up with. Thank you!

I'll be incorporating this into NomarCub/obsidian-copy-url-in-preview#2 shortly...

[sissilab]

@sissilab This is amazing! I spent an entire day trying to figure this out. Your code works and is so much more elegant than what I came up with. Thank you!

I'll be incorporating this into NomarCub/obsidian-copy-url-in-preview#2 shortly...

Glad to help you!

[luckman212]

@sissilab one possibly important note:

image.src should be set after image.onload according to my research, otherwise the callback won't always be fired for cached or very fast loading images.

[sissilab]

@sissilab one possibly important note:

image.src should be set after image.onload according to my research, otherwise the callback won't always be fired for cached or very fast loading images.

Thanks, I'll try it. ^v^