Selected image portion (width, height, x, y) as overlay image on a video.

Follow

Shahriar Rahman

• July 10, 2017 10:43

If I want to give a image overlay to a video, I can give width and height (w_300,h_200,l_sample,fl_splice,du_3) like the below example which actully transforms the image.

http://res.cloudinary.com/dnsvarmle/video/upload/w_300,h_200/w_300,h_200,l_sample,fl_splice,du_3/so_0,fl_layer_apply/v1498045249/Blank_Video_uiogdq.mp4

But what I am intend to do is that I want to overlay a certain portion of the image. Than means I need to give x and y cordinate, height, width. In examlpe,
I want to give image overlay of the Sample.jpg file on a certain protion that is defined in the selection box.

It would be very much helpful if someone can provide me a url where I can give x and y coordinate determining the position of the image 

0

• 

  Ido

  • July 11, 2017 22:56

  Hi

  If you want to crop the image before overlaying it, you could chain the transformation on the image itself, and then use the 'layer_apply' flag to have any transformation placed on the entire layered image.

   

  for example, in the video below the sample image is cropped to the dimensions of 200 X 500 px, with an east gravity. the "layer_apply" flag is then used to have the image overlayed from the 6.5 second until the 10th second

  http://res.cloudinary.com/demo/video/upload/l_sample,w_200,h_500,g_east,c_crop/so_6.5,eo_10,fl_layer_apply/dog.mp4

  0

  Comment actions Permalink
• 

  Shahriar Rahman

  • July 12, 2017 07:27

  Thank you very much Ido Bar-Noam for your answer.

  But my main concern is actually defining the corp position of them image. That can be done with x and y coordinate. Is there any way I can do that?

  0

  Comment actions Permalink
• 

  Ido

  • July 18, 2017 20:20

  Hi

   

  Sorry for the late reply.

  The way to define custom coordinates for cropping is by defining the coordinates for the custom gravity with the admin API or the UI and then use the `crop` option to crop according to them. 

  For example, the below image has custom coordinates already defined:

  http://res.cloudinary.com/demo/image/upload/c_crop,g_custom/sample_rrqdy4.jpg

   

   

   

   

  0

  Comment actions Permalink
• 

  Tal Lev-Ami

  • July 18, 2017 20:27

  Hi Shahriar,

  If you want to specify the coordinates on the url, you can do that as well:

  http://res.cloudinary.com/demo/image/upload/c_crop,w_500,h_500,x_120,y_140,g_north_east/sample_rrqdy4.jpg

   

  0

  Comment actions Permalink

Post is closed for comments.