Hi,
I’m developing a plugin that will allow users to browse through an asset library, select images they like, combine/stack them in a preview window and then send them into their photoshop document as individual layers.
I unfortunately can’t figure out how to get the contents of the preview window into the Photoshop document at all.
Any ideas or possible ways of achieving this final step?
Cheers
How about: https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/imaging/ ?
btw it is not beta anymore.
Great thanks I’ll take a look 
Any ideas on where I could get started with that for this purpose? Totally new to everything UXP and the Photoshop API unfortunately! Thanks for the help!
I’m trying a slightly different method and I’m setting up a prototype at the moment:
Currently I have a single image loaded into an image container and a button that will create a new layer in the active Photoshop document with that image. Currently a new layer is created but its empty. Any ideas on how to get the image from the image container placed in the new layer like its supposed to?
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Place Image on Layer</title>
> <style>
> body {
> font-family: Arial, sans-serif;
> display: flex;
> flex-direction: column;
> align-items: center;
> justify-content: center;
> height: 100vh;
> margin: 0;
> background-color: #f0f0f0;
> }
>
> .image-container {
> width: 400px;
> height: 400px;
> border: 1px solid #ccc;
> display: flex;
> align-items: center;
> justify-content: center;
> background-color: white;
> }
>
> .image-preview {
> width: 400px;
> height: 400px;
> object-fit: cover;
> }
>
> button {
> margin-top: 10px;
> padding: 8px 12px;
> font-size: 14px;
> cursor: pointer;
> }
>
>
> </style>
> </head>
> <body>
> <div class="image-container">
> <img id="imagePreview" class="image-preview" src="./assets/asset1.jpg" alt="Image preview">
> </div>
> <button id="createButton">Create</button>
>
> <script>
>
>
> async function placeImageOnLayer(imageUrl) {
> const psCore = require('photoshop').core;
> const app = require('photoshop').app;
> const batchPlay = require('photoshop').action.batchPlay;
> const document = app.activeDocument;
>
> const targetFunction = async () => {
> try {
> const layer = await document.createLayer({ name: "New Image Layer" });
>
> await batchPlay(
> [
> {
> _obj: 'placeEvent',
> target: {
> _ref: 'layer',
> _id: layer._id
> },
> imageURL: imageUrl,
> _isCommand: true,
> _options: {
> dialogOptions: 'dontDisplay'
> }
> },
> {
> _obj: 'transform',
> target: {
> _ref: 'layer',
> _id: layer._id
> },
> width: 400,
> height: 400,
> _isCommand: true,
> _options: {
> dialogOptions: 'dontDisplay'
> }
> }
> ],
> {
> synchronousExecution: true,
> modalBehavior: 'execute'
> }
> );
> } catch (error) {
> console.error("Error placing image on layer:", error);
>
> }
> };
>
> try {
> await psCore.executeAsModal(targetFunction);
> } catch (error) {
> console.error("Error executing function in modal:", error);
> }
> }
>
>
>
> document.addEventListener("DOMContentLoaded", () => {
> document.getElementById("createButton").addEventListener("click", async () => {
> try {
> const imageUrl = document.getElementById("imagePreview").src;
> console.log("Image URL:", imageUrl);
> await placeImageOnLayer(imageUrl);
> } catch (error) {
> console.error("Error during button click:", error);
> }
> });
> });
>
>
> </script>
> </body>
> </html>Hi. Our plugin does something different but maybe you can use these steps. However, there is most likely a more elegant way to do it. We created a library so we can reuse batchplay. You will have to substitute the values where needed and combine the batchplay.
Maybe you want to get active document ID so you can reference it later:
const psApp = require('photoshop').app;
const aDocId = psApp.activeDocument.id;
then Open the image using URL. You might need to create a persistent token to open the file in PS.
Next Select All Pixels On the Active Layer
{
_obj: "set",
_target: [
{
_ref: "channel",
_property: "selection"
}
],
to: {
_enum: "ordinal",
_value: "allEnum"
},
_options: {
dialogOptions: "dontDisplay"
}
}
Next Copy all pixels to clipboard
}
_obj: "copyEvent",
copyHint: "pixels",
_options: {
dialogOptions: "dontDisplay"
}
Close open image
{
_obj: "close",
saving: {
_enum: "yesNo",
_value: "no"
},
documentID: ***INSERTDocumentID***,
_options: {
dialogOptions: "dontDisplay"
}
}
Now select the previously active document by ID ie the doc you want to add new layer
{
_obj: "select",
_target: [
{
_ref: "document",
_id: *INSERTDocumentID*
}
],
documentID: *INSERTDocumentID*,
_options: {
dialogOptions: "dontDisplay"
}
}
Paste Clipboard
{
_obj: "paste",
antiAlias: {
_enum: "antiAliasType",
_value: "antiAliasNone"
},
as: {
_class: "pixel"
},
_options: {
dialogOptions: "dontDisplay"
}
}
Here is rename layer if you need it
{
_obj: "set",
_target: [
{
_ref: "layer",
_enum: "ordinal",
_value: "targetEnum"
}
],
to: {
_obj: "layer",
name: INSERTNewLayerName
},
_options: {
dialogOptions: "dontDisplay"
}
}
Wow thank you so much! Very much appreciated I’ll give that a go and report back with the results