Make a round image with a border using the JS SDK

Comments

4 comments

  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    François Poiré

    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
    Comment actions Permalink

Please sign in to leave a comment.