Skip to main content

Make a round image with a border using the JS SDK

François Poiré

Hi,

I'm trying to achieve what seems like an easy transformation: making an image round and add a colored border around the image.

This works perfectly when I create the URL manually, like so: https://res.cloudinary.com/demo/image/upload/r_max,bo_10px_solid_rgb:f00/autumn_leaves.jpg

But when I'm using the JS SDK, the resulting URL uses chained transformations, which don't produce the expected result, no matter how I order transformations:

https://res.cloudinary.com/demo/image/upload/r_max/bo_10px_solid_rgb:f00/autumn_leaves.jpg

https://res.cloudinary.com/demo/image/upload/bo_10px_solid_rgb:f00/r_max/autumn_leaves.jpg

Is there any way to work around this, or am I condemned to drop the SDK for this specific use case ?

Thanks for your help

0

Comments

4 comments

Date Votes
  • Raz Ziv

    Hey François,

    Are you using our JSv1 or JSv2 SDK?

    May I kindly ask to see your code for generating the URLs?

    Thanks,
    Raz

    0
  • François Poiré

    Hi Raz,

    I think I tried it with both v1 and v2, but I could only find the v2 code in my history. See below:

    let picture = new Cloudinary({cloud: {cloudName: 'demo'}})
      .image('autumn_leaves.jpg');

    picture
      .roundCorners(max())
      .border(new BorderAction('solid', '#f00', 10));

    console.log(picture.toURL());
    // logs https://res.cloudinary.com/demo/image/upload/r_max/bo_10px_solid_rgb:f00/autumn_leaves.jpg?_a=ATAABAA0
    let picture = new Cloudinary({cloud: {cloudName: 'demo'}})
      .image('autumn_leaves.jpg');

    picture
      .border(new BorderAction('solid', '#f00', 10))
      .roundCorners(max());

    console.log(picture.toURL());
    // logs https://res.cloudinary.com/demo/image/upload/bo_10px_solid_rgb:f00/r_max/autumn_leaves.jpg?_a=ATAABAA0

    Thanks for your time and help,

    François

    0
  • Raz Ziv

    Hey François,

    Thanks for sharing your code.

    Can you please let me know if this alternative works for you?

    let picture = new Cloudinary({cloud: {cloudName: 'demo'}})
      .image('autumn_leaves.jpg');

    picture.addTransformation('r_max,bo_10px_solid_rgb:f00');

    console.log(picture.toURL());


    Best,
    Raz

    0
  • François Poiré
    Edited

    Hey,

    Works like a charm, thanks !

    One last thing, is there a way to make this work with your fetch API ?

    I haven't found any example on how to use this API via the JSv2 SDK.

    Thanks,

    François

    EDIT: nevermind, I just found the setStorageType method, it does the job perfectly.

    I don't think it is mentioned in the SDK docs though, I believe it could be a useful addition for other developers, as well as a new example in the fetch API examples section.

    It wouldn't hurt either to add more specific typing in the package's TypeScript definitions, as 'string' does not give any information on the possible values.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post