Example of New JSON Format

[Lunteer]

Newbie here and did try to find documentation (failed, did I miss something?) so sorry if this is a non-issue.

Based on this thread, images in subfolders will not work with this solution. I know they are working on a fix but wanted to see if I could use the new JSON solution recommended. The problem is I am not sure where and what to implement. Do I put the JSON in the HTML code? In the img tag? What is the structure?

Any direction will be greatly appreciated!!

[mybluedog24]

https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/deployment.html

    const domain = "https://xxxx.cloudfront.net/"; // your domain
    const request = {
        bucket: "photos", // S3 bucket name,
        key: "path/to/your/image/avatar.png", // key name
        edits: { // optional
            "resize": {
                "width": 600,
                "fit": "cover"
            }
        },
    }
    const strRequest = JSON.stringify(request);
    const encRequest = btoa(strRequest);

    let url = `${domain}${encRequest}`; // the image url

[Lunteer]

@mybluedog24 Thanks! I place this in the html of the site or in the application, in my case PHP?

[mybluedog24]

@Lunteer It's Javascript code. You can then use the url in img tag:

const imageRequest = JSON.stringify({
    bucket: “myImageBucket”
    key: “myImage.jpg”,
    edits: {
        grayscale: true
    }
});
const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;

// Alternatively, you can call the url directly in an <img> element, similar to:
<img src=`${url}` />

See the details here (Step 2. Create and Use Image Requests): https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/deployment.html

[Lunteer]

@mybluedog24 Thanks for those added points. Makes it much clearer! Appreciate the help!

[Cohen-Efrat]

@mybluedog24 Hi, not really related to the issue but mabey do you know where I can find all the options to the edits part?

[Lunteer]

@efartCohen Image Handler uses SharpJS so the list is available on their site, https://sharp.dimens.io/en/stable/api-input/. However, somewhere, one of the AWS leads on this project does give warning that not all inputs are accepted. The best is to use the GUI included and test there.

We had issues with inputs not working but once we saw how it was structured in the GUI we got things working in our code. So it is a good idea to use the GUI as some testing ground.

[Cohen-Efrat]

@mybluedog24 Thanks!

[zeroshree]

What ll be JSON format for round corner ?. I deployed new version earlier it was previous version in python. please help