adobedocs / cis-photoshop-api-docs

https://developer.adobe.com/photoshop/photoshop-api-docs/

Adobe I/O Documentation Template

This is a Gatsby site template built with Adobe I/O Gatsby Theme.

View the demo running on Github Pages.

Where to ask for help

The slack channel #adobeio-onsite-onboarding is our main point of contact for help. Feel free to join the channel and ask any questions.

How to develop

For local development Open a terminal at the root of your local cis-photoshop-api-doc project/site and run the following command:

Run

yarn install
yarn dev

If you have a M1 mac. You need to install vips before yarn install. Run

brew install vips

Make sure to run lint locally before you check-in

npx @redocly/cli@latest lint static/swagger.json --extends minimal --format json --lint-config=off

Fix any lint errors before checking-in

To clean up any cache

yarn clean && yarn cache clean && rm -rf node_modules && rm package-lock.json && rm yarn.lock

If you remove yarn.lock, make sure to create an empty yarn.lock file at the root of your local cis-photoshop-api-doc project after clean up and run yarn install

To see the changes reflected locally, point the swagger.json to your local

Modify src/pages/api/index.md to point openAPISpec to your local swagger.json
openAPISpec: /swagger.json

For the documentation developer, please read these sections on how to:

• Arrange the structure content of your docs
• Linking to pages
• Using assets
• Setting Global Navigation
• Setting Side Navigation
• Using content blocks
• Notes on using Markdown

For more in-depth instructions.

How to deploy

For any team that wishes to deploy to the adobe.io and stage.adobe.io website, they must be in contact with the dev-site team. Teams will be given a path that will follow the pattern adobe.io/{product}/. This will allow doc developers to setup their subpaths to look something like:

adobe.io/{product}/docs
adobe.io/{product}/community
adobe.io/{product}/community/code_of_conduct
adobe.io/{product}/community/contribute

Launching a deploy

You can deploy using the GitHub actions deploy workflow see deploy instructions.

How to file an issue (for customers)

For issues, bugs, questions, or feedback please file a ticket by submitting a form at https://psd-services.zendesk.com/hc/en-us/requests/new

cis-photoshop-api-docs's Issues

Smartobject api

is it possible to call one PSD with lots of replacement image ?
What i'm seeing is one replacement image with lots of psd
usually psd is huge and jpg for replacing is small

Unable to upload the outputs - Access Is Forbidden

When I try to create a rendition and save it to S3 I am getting the following error:

{
  code: 403,
  details: [
    {
      name: 'https://s3.amazonaws.com/...',
      reason: 'Unable to upload the outputs'
    }
  ],
  title: 'Access Is Forbidden',
  type: 'AuthForbidden'
}

      // GENERATE A NEW TOKEN
      const authDetails: string = await this.generateIMSToken(clientIdAndApiKey, clientSecret);
      let authInfo = JSON.parse(authDetails);
      authToken = authInfo.access_token;

      // CREATE PS API OBJECT
      const client = await sdk.init(ims, clientIdAndApiKey, authToken);

      // GET SIGNED URL
      var signedPSDGetURL = await getSignedUrl(key, bucket);

      // CREATE SIGNED URL FOR SAVING THE OUTPUT
      var signedPutURL = await getSignedPutUrl(putKey, bucket);

      // CREATE DOCUMENT RENDITION
      var psdInputOptions = {
        href: signedPSDGetURL,
        storage: sdk.Storage.EXTERNAL
      }
 
      var psdOutputOptions = {
        href: signedPutURL,
        type: sdk.MimeType.PNG,
        storage: sdk.Storage.EXTERNAL,
        overwrite: true
      }

      const renditionResults = await client.createRendition(psdInputOptions, psdOutputOptions);
      console.log(renditionResults);

The results are:

Job {
  getJobStatus: [Function: bound __getJobStatus] AsyncFunction,
  url: 'https://image.adobe.io/pie/psdService/status/....',
  jobId: '...',
  outputs: [
    {
      input: 'https://s3.amazonaws.com/...',
      status: 'failed',
      created: '...',
      modified: '...',
      errors: [Object]
    }
  ],
  _links: {
    self: {
      href: 'https://image.adobe.io/pie/psdService/status/...'
    }
  }
}

I don't know what else I need to do

Update the example code with references to real PSDs

On the following page the example code contains references to the domain "host" as shown here:

const libFiles = require('@adobe/aio-lib-files')
const sdk = require('@adobe/aio-lib-photoshop-api')

async function sdkTest() {
  try {
    // initialize sdk
    const files = await libFiles.init();
    const client = await sdk.init('<ims org id>', '<api key>', '<valid auth token>', files)

    // call methods
    // auto cutout...
    const result = await client.createCutout('http://host/input.jpg', 'path/output.jpg')
    console.log(result)

This is not helpful to use example domains because there is no way to test if that code works or not because it's not pointing to a real example.

Please use real examples so we can know that when errors occur if it is our code.

Before:

    const result = await client.createCutout('http://host/input.jpg', 'path/output.jpg')
    console.log(result)

After:

    const result = await client.createCutout('http://www.adobe.com/test-psd.psd', 'path/output.jpg')
    console.log(result)

https://github.com/adobe/aio-lib-photoshop-api?tab=readme-ov-file#usage

How to send a response when processing is complete

After reading through the examples it looks like the way to use the api is to:

1. make a call
2. get an id back from the call
3. poll using that id until the status of job is complete

That's according to some of the example code and documentation here.

Over the last few years the trend has been to start using the await behavior and not proceed in the code block until thee final response is returned from the call.

Is the polling behavior part of all the api or is it possible to make a call to the API and some how tell it to not send a response until everything is complete?

Expected Behaviour

      var psdURL = "...";
      var documentManifestURL = "https://image.adobe.io/pie/psdService/documentManifest";
      var documentManifest = await client.getDocumentManifest(psdURL);
      console.log(documentManifest);

Actual Behaviour

      // pseudo code
      var psdURL = "...";
      var documentManifestURL = "https://image.adobe.io/pie/psdService/documentManifest";
      var results = await client.getDocumentManifest(psdURL);
      var jobID = results.href;
      // complicated polling code 
      // console.log(documentManifest);

Also, it may be that the sdk supports this now. I'm still reading through the documentation but much of the example code shows polling.

Change text type by text api

I try to use text api to change the text type to point, but the output file is also keep input text type.

Expected Behaviour

change the text type by text api

Actual Behaviour

can't change the text type

Sample Code that illustrates the problem

{ "inputs": [ { "href": "input_url", "storage": "external" } ], "options": { "layers": [ { "id": 8, "text": { "paragraphStyles": [{"spaceBefore": 0, "spaceAfter": 0}], “textType": "point", "characterStyles": [{"fontPostScriptName": "SourceHanSerif-Heavy"}], }, }, { "id": 9, "text": { "paragraphStyles": [{"spaceBefore": 0, "spaceAfter": 0}], "textType": "point", "characterStyles": [{"fontPostScriptName": "SourceHanSerif-Heavy"}], }, } ] }, "outputs": [ { "href": "out_url", "storage": "external", "type": "vnd.adobe.photoshop", "overwrite": true } ] }

Suggestion: Include example config json

In the documentation there is mention of an example config.json file but I don't see it in the project. It is referenced here:

https://github.com/AdobeDocs/cis-photoshop-api-docs/blob/3d2c1259875149aa807f1dfbc44a0794259264a0/sample-code/service-principal-sample-app/index.js#L15C25-L15C39

The example code references a psdService URL and that seems to be defined in the config.json.

Error: PhotoshopSDKError: 401 "Oauth token is not valid"

When following the examples the following code works but just now I'm getting back this error:

PhotoshopSDKError: [PhotoshopSDK:ERROR_UNAUTHORIZED] 401 - Unauthorized ({"error_code":"401013","message":"Oauth token is not valid"})

      const sdk = require('@adobe/aio-lib-photoshop-api');
      const client = await sdk.init(imsOrgId, clientIdAndApiKey, authToken);
      var documentManifestURL = "https://image.adobe.io/pie/psdService/documentManifest";
      var documentManifest = await client.getDocumentManifest(psdURL); // error here

The error happens on the call to getDocumentManifest()

Shouldn't the error occur when calling client.init()?

Is there a way to tell if the token expired or if the token is not valid?

How long do tokens last? The getting started page says tokens are valid for one hour in part but 60 days in another part. Maybe it's two different things. See the text in the screen shot, "...it is good for 60 days":

I am able to call client.createCutout() and get a invalid input but not an 401. The call fails but it is not a 401 error.

Adobe API response for cutout/mask

I am trying to use Adobe API cutout/mask. As per the document i have created a GET and PUT. According to the document i also generated the required access token. For PUT operation i am using my own Java Servlet with PUT method. When i try to run my script, adobe API GET operation is successful. My doPUT method is invoked by Adobe API. I am able to create an inputstream. However, when i save the imputstream as png file then it i s not in the proper format

It seems while trying to save inputstream i should filter some bytes. How to determine the bytes which needs to be saved for cutout or mask. There is nothing in the HEADER information which i can use Are there any bytes which i can use to validate the start and end of PNG file content. I have tried to look for "IEND" + 4 bytes. However, still it is a corrupted file

ServletInputStream fis=req.getInputStream(); 
byte b[]=new byte[4];
 int data=fis.read(b);        
 boolean fosstream = true;
    while(data !=-1)
    {
       
        
        if(fosstream)
        byteArrayOutputStream.write(b);
        String string = new String(b, StandardCharsets.UTF_8); 
        if(string.equalsIgnoreCase("IEND")) {
        fosstream = false;
        data=fis.read(b);
        byteArrayOutputStream.write(b);
        }
        
        data=fis.read(b);
        
        
    }
    
    byte[] bytesRead = byteArrayOutputStream.toByteArray();
    
    fos.write(bytesRead);
    fos.flush();
    fis.close();     

Add types to sdk

Using VSCode with the library there doesn't seem to be auto complete on the API. No type definitions (or asdocs).

If I follow the example code from here:

      const client = await sdk.init(imsOrgId, clientIdAndApiKey, authToken);
      client. // does not show auto complete of object members

Expected Behaviour

Autocomplete to show documentation in VSCode

Actual Behaviour

No autocomplete and no documentation in VSCode

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Create a new node project and then follow the instructions here to import the library and then start to type the example code in vscode. You would expect to see auto complete.

https://github.com/adobe/aio-lib-photoshop-api?tab=readme-ov-file#usage

Platform and Version

OSX

Sample Code that illustrates the problem

https://github.com/adobe/aio-lib-photoshop-api?tab=readme-ov-file#usage

Logs taken while reproducing problem

Follow instructions here:
https://github.com/adobe/aio-lib-photoshop-api?tab=readme-ov-file#usage

Update the documentation with code examples for the nodejs client sdk

There's a lot of documentation and examples on the PS API and as I've worked with it, there appears to be a client.sdk library that runs in nodejs. I don't see many examples for this anywhere but the library is very user friendly and designed in a modern way.

Suggestion is to add code examples for the sdk across the rest of the documentation and examples:

• https://developer.adobe.com/photoshop/photoshop-api-docs/code-sample/#create-a-document-rendition
• https://developer.adobe.com/photoshop/photoshop-api-docs/api/#tag/Photoshop/operation/mask
• https://developer.adobe.com/photoshop/photoshop-api-docs/features/#rendering--conversions
• https://developer.adobe.com/photoshop/photoshop-api-docs/

More examples here:
https://github.com/adobe/aio-lib-photoshop-api?tab=readme-ov-file#usage

Also, it should be noted I couldn't get the client sdk to work unless I generated a new token each time first before calling a client function. Although, I could have it setup wrong.