Face gravity thumbnail with offset

Comments

5 comments

  • Avatar
    Wissam Khalili

    Hi Manu,

    In order to offset the image when using g_face, you could use a white pixel with layer apply and then to use x_-200, for example:

    https://res.cloudinary.com/wissamkhalilicloudinary/image/upload/l_1px/b_white,h_400,w_600/fl_layer_apply.cutter,g_face,x_-200/samples/people/kitchen-bar.jpg

    Hope you will find it helpful!

    Thanks,

    Wissam

    0
    Comment actions Permalink
  • Avatar
    Manu

    That looks great, Wissam
    Any way you can help me translate this into a React V2 style transformation ? (I am an early adopter of the react v2 SDK).
    Or give me some hints on how to do it

    0
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    Hey Manu, I'm glad you found Wissam's suggestion helpful :)

    I've created an example of generating a transformation similar to the one Wissam suggested, using the React v2 SDK -
    https://codesandbox.io/s/react-js-sdk-2-0-163465-fs922?file=/src/MyImgExample.js

    In order for it to work, make sure to upload the 1px image to the root folder of your account, and set your cloud name.

    Cheers!

    0
    Comment actions Permalink
  • Avatar
    Manu

    Hi Eyal
    Thanks for the sandbox
    I tried forking it and using my own cloud, but was unable to see the same result. The generated URL seems to be similar also, but is not doing the needful.

    And yes, I did upload the 1px image to my account.

    Here is my fork : https://codesandbox.io/s/react-js-sdk-2-0-163465-forked-92knk?file=/src/MyImgExample.js

    PS:
    If I use another image "mike-von-BhcutpohYwg-unsplash_rwbsw0" (commented out), the transformation works

    I think the difference might be that in the current image, I had removed the originally detected face coordinates. But then I did manually add the face coordinates, but somehow they are not being picked up ?
    Is there a way to restore the originally detected face coordinates?

    0
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    Hey Manu,

    Viewing your CodeSandbox fork on my end, it looks like both images are working correctly -
    https://res.cloudinary.com/eyalkatzt/video/upload/v1634818624/screenshots/Screen_Recording_2021-10-21_at_14.53.06_a2tawc.mp4

    It is possible that the reason it seems to not work on your end, is that you're seeing a cached version of the image (which was cropped before you've added the face coordinates manually). I've now invalidated the cache of both images - Can you try refreshing the browser and see if the issue persists? Can you try in Incognito mode?

    In order to restore the originally detected face coordinates, which you have removed, you'll need to reupload the image.

    0
    Comment actions Permalink

Please sign in to leave a comment.