How to copy image/binary data to the clipboard?

Hello, I have a GIF as a Uint8Array, and would like to copy it to the clipboard. How can I do this?

Based off these docs (https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Global%20Members/Data%20Transfers/Clipboard/) I tried:

            // setContent has the same issue
            await navigator.clipboard.write({
                'image/gif': gif
            })

but I get ReferenceError: text is not defined. I can copy text just fine, but I want the file itself.

I also tried it with a ClipboardItem like the mozilla documentation says, but then i get ReferenceError: ClipboardItem is not defined

You need to use the Imaging API for that!

Thanks! Is there any chance you/someone could provide an example? I tried everything I could think of and still can’t copy any image data to the clipboard (ignoring my gif for now).

const imageObj = await imaging.getPixels({
    layerID: id,
    targetSize: { width, height },
    componentSize: 8,
    applyAlpha: true
})
// await navigator.clipboard.setContent({ 'image/uncompressed': imageObj })
// await navigator.clipboard.setContent({ 'image/uncompressed': imageObj.imageData })

const data = imageObj.imageData.getData({})
// await navigator.clipboard.setContent({ 'image/uncompressed': data })

const jpeg = (await imaging.encodeImageData({
    imageData: imageObj.imageData,
    base64: false
})) as number[]
// await navigator.clipboard.setContent({ 'image/jpeg': jpeg })

const base64 = (await imaging.encodeImageData({
    imageData: imageObj.imageData,
    base64: true
})) as string
// await navigator.clipboard.setContent({ 'image/jpeg': base64 })
// await navigator.clipboard.setContent({ 'application/base64': base64 })
// await navigator.clipboard.setContent({ 'text/plain': base64 })

Using write() instead of setContent() for all of these gave me an error: ReferenceError: text is not defined

Using setContent() gave me different errors:

Trying to use imageObj, imageObj.imageData, data, and jpeg gave me the error: Error: Failed to create DataTransferProviders: invalid DataTransferProviders parameter.

Trying to use base64 gave me Invalid clipboard content. (Unless I used the text/plain mime type, but then it just copies the base64 as a string to my clipboard, not the image itself)

Using image/jpeg instead of image/uncompressed resulted in the same errors as well.

Thanks!

There are some great examples here, one of them might be what you’re looking for.

https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/imaging/#sample-files

I appreciate the samples, but unfortunately none of them show how to use the imaging API to copy image data to the clipboard :confused: