outputFormat option not honored

[leviwilson]

In image-handler.js there is an option for setting the outputFormat of the image:

if (request.outputFormat !== undefined) {  
   await modifiedImage.toFormat(request.outputFormat);  
}

However, the manner in which the image-request.js feeds that request object into there doesn't actually pass that through from the actual request:

    async setup(event) {
        try {
            this.requestType = this.parseRequestType(event);
            this.bucket = this.parseImageBucket(event, this.requestType);
            this.key = this.parseImageKey(event, this.requestType);
            this.edits = this.parseImageEdits(event, this.requestType);
            this.originalImage = await this.getOriginalImage(this.bucket, this.key)
            return Promise.resolve(this);
        } catch (err) {
            return Promise.reject(err);
        }
    }

Are we missing something or are we unable to tell the serverless-image-handler what the output format of the file should be?

The context is we have TIFF images and need them to be converted (see #45 for more details).

[hayesry]

Hey @leviwilson - Thanks for providing a corresponding PR to this. I've added it to our review board and hope to have it pushed out in the next minor release. Appreciate your time and effort on this!

[beomseoklee]

We have updated our solution, and I believe your issue has been fixed. If you still see the issue with the latest version (v4.2), please feel free to reopen the issue.

You can refer to the recent changes here

[adrienne]

@georgebearden @beomseoklee - I am using the latest version and I still see the issue.

[beomseoklee]

@adrienne Can you provide how you are using so that I can reproduce?

[adrienne]

@beomseoklee

Here's an example of something that doesn't work. I get a webp image regardless of "outputFormat" .

var obj = JSON.stringify({
  "outputFormat": "png",
  "bucket": "s3-media",
  "key": "images/products/revised/PRODUCT_1.png",
  "edits": {
    "resize": {
      "width": 1170,
      "height": 600,
      "fit": "contain",
      "background": {
        "r": 255,
        "g": 255,
        "b": 255,
        "alpha": 1
      }
    },
    "flatten": {
      "background": {
        "r": 255,
        "g": 255,
        "b": 255,
        "alpha": null
      }
    }
  }
});

console.log(btoa(obj));

[beomseoklee]

@adrienne

Currently, there's a bug related to webp, and you can see how to fix at #200.

Meanwhile, can you try the below one?

var obj = JSON.stringify({
"bucket": "s3-media",
"key": "images/products/revised/PRODUCT_1.png",
  "edits": {
    "toFormat": "png",
    "resize": {
      "width": 1170,
      "height": 600,
      "fit": "contain",
      "background": {
        "r": 255,
        "g": 255,
        "b": 255,
        "alpha": 1
      }
    },
    "flatten": {
      "background": {
        "r": 255,
        "g": 255,
        "b": 255,
        "alpha": null
      }
    }
  }
});

console.log(btoa(obj));

[adrienne]

@beomseoklee - i had to switch to using your above code (with toFormat inside the edits key) and update to the beta version of the template, but this is now working. (Using outputFormat alone does not work, even on the new beta version of the template.)

[beomseoklee]

@adrienne Can you check 2 things?

1. Can you verify your AutoWebP parameter is No?
2. Can you run CloudFront distribution invalidation, then access the URL again?