Hello everyone,
I’m currently developing a panel aimed at importing images from URLs into the active Photoshop document. Although the script runs without errors on my end, the imported image doesn’t appear in the document as intended, check the screenshot below :
I’m attaching the script for your reference. I’d greatly appreciate any assistance or suggestions for resolving this issue, whether through code edits or alternative solutions.
Thank you!
// panel.js
document.getElementById('importButton').addEventListener('click', async () => {
const imageUrl = document.getElementById('imageUrl').value.trim();
const urlPattern = /^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$/;
if (!urlPattern.test(imageUrl)) {
alert('Please enter a valid image URL.');
return;
}
try {
console.log('Fetching image from URL:', imageUrl);
const response = await fetch(imageUrl);
if (!response.ok) {
throw new Error('Failed to fetch image. Please check the URL and try again.');
}
const blob = await response.blob();
const mimeType = blob.type;
console.log('Fetched image blob:', blob);
const uxp = require('uxp');
const fs = uxp.storage.localFileSystem;
const tempFolder = await fs.getTemporaryFolder();
const tempFile = await tempFolder.createFile('tempImage.png', { overwrite: true });
await tempFile.write(blob);
// Get the file token
const fileToken = await fs.createSessionToken(tempFile);
// Access Photoshop ActionManager
const { action, core } = require('photoshop');
const batchPlay = action.batchPlay;
// Execute batchPlay within a modal scope
await core.executeAsModal(async () => {
// Place the image into the current document using batchPlay
const result = await batchPlay(
[
{
_obj: "placeEvent",
null: {
_path: fileToken,
_kind: "local"
},
_place: {
_x: 100, // X coordinate where the image should be placed
_y: 100, // Y coordinate where the image should be placed
}
}
],
{ synchronousExecution: true }
);
console.log('Image placed successfully');
});
// Clean up temporary file after placing the image
await tempFile.delete();
} catch (error) {
console.error('Error importing image:', error);
alert('Failed to import image. Please try again later.');
}
});