Changer une photo dans un PSD

Le remplacement se fait entièrement par l’API, sans boutons dans l’iframe. Utilisez le SDK livré avec cette version de l’éditeur. L’origine exacte de votre site Lovable doit être autorisée dans parentOrigins.

Intégration Lovable / JavaScript

Copiez app/sdk.js dans votre application Lovable, par exemple sous src/lib/studio-sdk.js, puis importez StudioClient depuis ce fichier. Créez le client une seule fois après le montage de l’iframe et appelez studio.destroy() lors de son démontage. Attendez les commandes avec await et affichez les erreurs renvoyées à l’utilisateur.

import { StudioClient } from './studio-sdk.js';

const studio = new StudioClient(
  document.querySelector('#studio'),
  'https://studioedit.maskperso.shop/',
  { timeout: 120000 }
);
await studio.ready;

// fichierPSD et fichierPhoto sont des File choisis dans votre site.
await studio.open(await fichierPSD.arrayBuffer());

await studio.replaceSmartObject(
  'photo 1',
  await fichierPhoto.arrayBuffer(),
  { name: fichierPhoto.name, fit: 'cover' }
);

// L’aperçu se met à jour automatiquement dans l’iframe.
// Ces exports renvoient des données ; aucun téléchargement n’est déclenché.
const psd = await studio.export('psd');
const png = await studio.export('png');

// Exemple : envoyer le PSD vers votre propre stockage.
// await fetch('/votre-endpoint', { method: 'POST', body: psd });

L’iframe doit exister dans votre page : <iframe id="studio" title="Aperçu" style="width:100%;height:600px"></iframe>. Dans React, passez iframeRef.current au constructeur. Un ArrayBuffer est transféré directement : aucune URL publique de photo n’est nécessaire. Si votre application récupère le fichier avec fetch, le serveur de ce fichier doit autoriser cette récupération.

Paramètres

Paramètre	Signification
target	Nom exact et unique de l’objet dynamique. La recherche inclut les groupes ordinaires du document courant. Les noms sont sensibles à la casse.
buffer	ArrayBuffer du fichier de remplacement, par exemple JPEG, PNG ou PSD pris en charge par l’éditeur.
name	Nom du fichier, par défaut Photo.png.
fit: 'cover'	Valeur par défaut. Remplit la zone sans déformer la photo, centrée et recadrée si nécessaire.
fit: 'contain'	Affiche toute la photo centrée sans déformation ; marges transparentes si les proportions diffèrent.
fit: 'stretch'	Étire la nouvelle source dans le quadrilatère existant ; peut déformer la photo.

Cover et contain utilisent les dimensions de la source de l’objet, puis sa transformation extérieure. La photo originale est incorporée comme objet dynamique dans un PSD interne ; les pixels recadrés restent dans cette source. Le placement, les masques, styles et autres calques du document parent sont conservés.

Trouver le nom d’un objet

const noms = await studio.run(`
  var layers = app.activeDocument.layers;
  for (var i = 0; i < layers.length; i++) {
    if (layers[i].kind === "smart") app.echoToOE(layers[i].name);
  }
`);
console.log(noms);

Objet à l’intérieur d’un autre objet

await studio.replaceSmartObject(
  ['MAQUETTE', 'PHOTO'],
  await fichierPhoto.arrayBuffer(),
  { name: fichierPhoto.name, fit: 'cover' }
);

Le moteur ouvre le contenu de MAQUETTE, remplace PHOTO, puis réincorpore le contenu éditable dans le PSD parent. Les groupes ordinaires ne figurent pas dans cette liste : chaque étape intermédiaire désigne un objet dynamique.

Le contenu de l’objet ciblé est remplacé. Si celui-ci contient un décor ou du texte à garder, ciblez l’objet photo à l’intérieur avec le chemin ci-dessus. Le remplacement direct concerne uniquement l’instance ciblée. En remontant un objet parent imbriqué, les instances partageant sa source sont mises à jour ensemble.

Protocole postMessage sans SDK

Après réception du premier done, envoyez le message ci-dessous depuis le parent autorisé. Vérifiez l’origine et la fenêtre émettrice de chaque réponse. Attendez done avant la commande suivante. L’URL de l’iframe doit préciser parentOrigin avec l’origine de votre site.

iframe.contentWindow.postMessage({
  type: 'studio:replaceSmartObject',
  target: 'photo 1',
  buffer: await fichierPhoto.arrayBuffer(),
  name: fichierPhoto.name,
  fit: 'cover'
}, 'https://studioedit.maskperso.shop');

En cas d’erreur : {type:'studio:error', message:'…'}, suivi de done. Le SDK rejette la promesse. Le document est restauré si le remplacement échoue.

Limites explicites

Un nom absent ou ambigu, un calque non dynamique, un fichier invalide, une source externe manquante lors de la traversée, une déformation avancée ou un filtre dynamique non pris en charge provoquent une erreur. Aucun remplacement par un aperçu aplati n’est effectué en secours. L’apparence des effets reste soumise aux capacités de rendu actuelles du moteur. Cette commande appartient à studiophotoedit : ce n’est pas l’implémentation complète des scripts d’un autre éditeur.