Creating an image with an image from an External URL

michael

November 17, 2021 16:04

I am trying to create an image that would look something like this...
Basically I want to take 2 external image urls (not social media pictures) and combine them together to make an image.

Is there any way to do this without first saving the images to cloudinary?
I've seen a few different things mentioned. Remote Image fetch seemed like it would work at first but I've tried to use it with multiple images and can't seem to get it to work.

Also, I tried to convert the images to base64, as described here, but it made the links so long that they wouldn't actually work in the browser.

Any help would be greatly appreciated.

0

• 

  Eyal Katz Talmon

  November 18, 2021 14:38 Edited

  Hi Michael, thanks for reaching out!

  Although I've already replied to you in the ticket you've opened, I'll answer here as well for others to see.

  There are probably multiple ways of achieving the desired result, and I'll share an example of tusing l_fetch:<base64 of the remote image URL>​, which would automatically upload the remote images to your account as type 'fetch' -

  https://res.cloudinary.com/<cloud_name>/image/upload/b_cadetblue/w_800,h_200/l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy9jL2M2L0FyZXRoYV9GcmFua2xpbl8xOTY4LmpwZw==,w_150,h_180,c_fit/fl_layer_apply,g_west,x_20/l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy8wLzBjL1NjYXJsZXR0X0pvaGFuc3Nvbl9DJUMzJUE5c2Fyc18yMDE0LmpwZw==,w_150,h_180,c_fit/fl_layer_apply,g_east,x_20/1px.jpg

  Here is a breakdown of the above transformation -

  https://res.cloudinary.com/eyalkatzt/image/upload/
  
  b_cadetblue/
  w_800,h_200/
  l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy9jL2M2L0FyZXRoYV9GcmFua2xpbl8xOTY4LmpwZw==,w_150,h_180,c_fit/
  fl_layer_apply,g_west,x_20/
  l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy8wLzBjL1NjYXJsZXR0X0pvaGFuc3Nvbl9DJUMzJUE5c2Fyc18yMDE0LmpwZw==,w_150,h_180,c_fit/
  fl_layer_apply,g_east,x_20/
  
  1px.jpg

  The base 64 strings were generated from these remote URLs (from the URL strings, not the images - just to clarify) -

  https://upload.wikimedia.org/wikipedia/commons/c/c6/Aretha_Franklin_1968.jpg
  https://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_C%C3%A9sars_2014.jpg

  As a base image, I've used the 1px image, scaled to 800x200, with the background color set to 'CadetBlue'.
  Here is the result on my account - 

  

  If the remote images are all located in the same remote location of yours, you should consider using auto-upload mapping instead 'fetch'. This will allow you to specify the images as if they are already present on your account, and if that's not the case, they would be uploaded on the fly as well (as long as the specified folder is a mapped one). Here is a comparison between 'fetch' and auto-upload - 

  https://cloudinary.com/documentation/fetch_remote_images#comparing_fetch_to_auto_upload

  Cheers!

  0

Post is closed for comments.