Distorted image created with createImageDataFromBuffer function

Photoshop UXP Plugin API
1

I have a simple buffer from a response that I want to show in a layer. But the image generated is distorted. Kindly help.

try {
    const { app, imaging, core, constants } = require("photoshop");
    const { storage } = require("uxp");

    await core.executeAsModal(async () => {
        const { data: transformedImageBuffer } = await axios(
            "https://cdn.pixelbin.io/v2/black-sound-ffec6c/original/__photoshop/pexels-19565250-iWTwyapIq.jpeg",
            { responseType: "arraybuffer" }
        );

        const transformedImageLayer = await app.activeDocument.createPixelLayer(
            { name: "River" }
        );

        const outputImageData = await imaging.createImageDataFromBuffer(
            new Uint8Array(transformedImageBuffer),
            {
                width: 432,
                height: 768,
                components: 4,
                colorSpace: "RGB",
                chunky: false,
                // colorProfile: "sRGB IEC61966-2.1",
            }
        );

        await imaging.putPixels({
            layerID: transformedImageLayer._id,
            imageData: outputImageData,
        });

        outputImageData.dispose();
    });
} catch (err) {
    console.error(err);
}

Distorted image

distorted
distorted432×767 471 KB

2

You have to convert JPG into bitmap in first place. Now you are just putting in raw data.

3

To @Jarda’s point it looks like you’re passing the raw data of a JPG file (including file header, etc.) to a function that expects a plain array of pixel data. That said, before you try interpreting the JPG file and grabbing/converting its pixel data I would suggest a different route: saving the JPG image into the data or plugin folder (or any other folder that you have access to) and using Photoshop to open it (as a temp document). Photoshop is pretty darn good at opening all sorts of data formats and dealing with their quirks :wink:

1 Like
4

@dotproduct Thanks for the suggestion. I was able to display the image in a new document. But i would like the image to be placed at a specific position also. Below is the code.

const currentDocument = app.activeDocument;
const newDocument = await app.open(file);

const transformedImageLayer =
    await newDocument.activeLayers.at(0).duplicate(
        currentDocument
    );

await newDocument.close(
    constants.SaveOptions.DONOTSAVECHANGES
);

Is there any way to open at a given position?

5

I thought of a solution to simply move the layer using the below code. I actually would have preferred to do it via any direct APIs, but anyway :man_shrugging:t6:.

async function changeLayerPosition(sourceLayer, targetBounds) {
    await require("photoshop").app.batchPlay(
        [
            {
                _obj: "select",
                _target: [
                    {
                        _ref: "layer",
                        _name: sourceLayer.name,
                    },
                ],
                makeVisible: false,
                layerID: [sourceLayer.id],
                _isCommand: false,
            },
            {
                _obj: "move",
                _target: [
                    {
                        _ref: "layer",
                        _enum: "ordinal",
                        _value: "targetEnum",
                    },
                ],
                to: {
                    _obj: "offset",
                    horizontal: {
                        _unit: "pixelsUnit",
                        _value: targetBounds.left,
                    },
                    vertical: {
                        _unit: "pixelsUnit",
                        _value: targetBounds.top,
                    },
                },
                _options: {
                    dialogOptions: "dontDisplay",
                },
            },
            {
                _obj: "selectNoLayers",
                _target: [
                    {
                        _ref: "layer",
                        _enum: "ordinal",
                        _value: "targetEnum"
                    }
                ],
                _options: {
                    dialogOptions: "dontDisplay"
                }
            }

        ],
        {}
    );
}