Skip to main content

Comments

11 comments

Date Votes
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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

Post is closed for comments.

Didn't find what you were looking for?

New post