This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Comments

11 comments

Sort by Date Votes
  • Avatar
    Marissa Masangcay

    Hi,

    With our Displace feature images can be manipulated according to a displacement image (gradient map) and control the 'x' and 'y' levels.

    For example, required for placing an image over a cup underlay:

    http://res.cloudinary.com/demo/image/upload/l_sample,w_182,h_198/c_pad,h_2.0,w_1.0/l_radial_ipdlli,e_displace,y_-8/e_trim/fl_layer_apply,x_-26,y_28/glass.jpg

    I hope this helps! Please let me know if you're looking to do something else.

    0
    Comment actions Permalink
  • Avatar
    PO Tran

    Thanks ! I tried applying the same transformation, but this doesn't work, how does this gradient thing works ?

    Here's my URL, but obviously, there is no displacement :

    http://res.cloudinary.com/balibart/image/upload/l_5ae1a21c8c549b50f8018304_front,w_382,h_498/c_pad,h_2.0,w_1.0/l_radial_ipdlli,e_displace,y_-8/e_trim/fl_layer_apply,x_-26,y_28/v1525075622/left_mug.png

    Thanks !

    0
    Comment actions Permalink
  • Avatar
    Marissa Masangcay
    • Edited

    Hi,

    Here is what I think you're looking for:

    http://res.cloudinary.com/demo/image/upload/w_382/c_pad,h_2.0,w_1.0/l_radial_ipdlli,e_displace,y_-8/e_trim/u_left_mug,w_690,x_-13/v1525075622/5ae1a21c8c549b50f8018304_front.jpg

    The logic was changed around a little bit and the mug is applied as an underlay with the goat image as the base image. The gradient image acts as a "displacement map" to instruct how to "distort" the image. The brighter it gets the more the original image is used and the darker it gets the alteration is applied. This why this particular gradient image helps distort the image onto the mug. Other gradient images may be more relevant depending on what you're trying to do.

    Hope this helps!

    0
    Comment actions Permalink
  • Avatar
    PO Tran

    Thansk a lot ! Last question, i'm trying to apply these transformations though the node.js transformation object, but for some reason, the design gets cropped, as you can see here :

    This happens even though I changed the height to be 1.1 times its original size, I also tried increasing this number, I still get the same cropping.

     

    Here is the matching node.js transformation :

     

    transformation
    :
    Array
    1.  0:Object
      effect
      1. :"displace"
      2. overlay:"radial_ipdlli"
      3. y:-26
    2. 1:Object
      1. height:"1.51"
      2. width:"1.0"
      3. crop:"pad"
    0
    Comment actions Permalink
  • Avatar
    Yakir Perlin

    Hi, 

     

    Could you pease try this code:

     

    cloudinary.image("sample.jpg", {transformation: [
  {width: 382, crop: "scale"},
  {height: 0, width: "1.0", crop: "pad"},
  {effect: "displace", overlay: "radial_ipdlli", y: -8},
  {effect: "trim"},
  {underlay: "left_mug", width: 690, x: -13, crop: "scale"}
  ]})

     

    Please let me know if it works for you

    Best,

    Yakir

    0
    Comment actions Permalink
  • Avatar
    PO Tran

    Unfortunately not, this triggers a 400 error, saying that 0 is an invalid height for transformation. If I remove this parameter, I get the wrong cropping again

    0
    Comment actions Permalink
  • Avatar
    Yakir Perlin

    Ok, sorry, so change to "2.0".

    cloudinary.image("sample.jpg", {transformation: [
  {width: 382, crop: "scale"},
  {height: "2.0", width: "1.0", crop: "pad"},
  {effect: "displace", overlay: "radial_ipdlli", y: -8},
  {effect: "trim"},
  {underlay: "left_mug", width: 690, x: -13, crop: "scale"}
  ]})
    0
    Comment actions Permalink
  • Avatar
    PO Tran

    hi ! Thanks for your answers, and sorry to reopen this issue.

    So far, I managed to displace the images in one direction, but is it possible to bend them in both directions using cloudinary ?

    Here is the original image : 

    Here is what I was doing do far, based on your advices:

    And finally, here is what I'd like to achieve :

    Thank you !

    0
    Comment actions Permalink
  • Avatar
    Ido

    Hi

    In all of these examples we used the below displacement map to curve the image:

    http://res.cloudinary.com/demo/image/upload/radial_ipdlli

    A different map could curve that more according to what you are especially looking for.

    Does that make sense?

     

    0
    Comment actions Permalink
  • Avatar
    PO Tran

    That's quite complicated, since the Cloudinary documentation does not mention any example of how to use/generate these maps. So far, I understand that the gradient map is used to "bend" the image according to te gradient, but it does not mention how it works. 

    What did you use to generate this gradient map ?

    0
    Comment actions Permalink
  • Avatar
    Shirly Manor

    You can use any photography tool that had this feature (e.g., Photoshop). If you want to use it as a cup. you're more than welcome to use our gradient map (e.g.,http://res.cloudinary.com/demo/image/upload/radial_ipdlli).

    0
    Comment actions Permalink

Post is closed for comments.