I can't draw the downloaded file

Photoshop UXP Plugin API
,
1

Hello. I want to take an image from the folder and draw it in UXP (I also tried it in a layer). In the debugger, my code stops at this point. My code:

const photoshop = require('photoshop');
const uxp = require('uxp');
const app = photoshop.app;
const imaging = photoshop .imaging;
const formats = uxp.storage.formats
const fs = uxp.storage.localFileSystem;
        const pluginFolder = await fs.getPluginFolder();
        const theTemplate = await pluginFolder.getEntry("1.jpg");
        let arr = await theTemplate.read({format: formats.binary});
        const imageData = await imaging.createImageDataFromBuffer(
            new Uint8Array(arr),
            {
                width: 510,
                height: 350,
                components: 4, //or 3
                colorSpace: "RGB",
                // colorProfile: "Adobe RGB (1998)"
            });
        await renderImage(imageData);

I tried 2 variations of the renderImage method and none worked.

async function renderImage(imageData){

        //Version #1 (from the documentation)
        const imageElement = document.createElement('img');

        const jpegData = await imaging.encodeImageData({imageData: imageData, base64: true}); // (Here the code fails)

        const dataUrl = "data:image/jpeg;base64," + jpegData;
        imageElement.src = dataUrl;
        document.body.appendChild(imageElement);

        //Version #2
        // const imageBlob = new ImageBlob(imageData.getData, imageData) // (Here the code fails)
        // const dataUrl = URL.createObjectURL(imageBlob);
        // const imageElement = document.createElement('img');
        // imageElement.src = dataUrl
    }

Tried on three different files (jpg, png, jpg)

P.S.
Using the getPixels() method, I can output an image, but not from a file.

so I couldn’t take the file from the layer in photoshop to check it.

UPD:

shot1
shot1877×572 23.5 KB

It turned out (using the method from the first version), but the image turned out to be broken. in options, I changed the number of components to 3, it doesn’t work with another quantity. The size was also made in accordance with the image itself 280x180, the colorSpace is still RGB, and the file format is PNG.

2

I solved my problem by writing a custom method to get a Base64 image. (of course with StackOverflow).

function _arrayBufferToBase64( buffer ) {
        var binary = '';
        var bytes = new Uint8Array( buffer );
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return window.btoa( binary );
    }

But I will be glad if you tell me what was my mistake

2 Likes