Fetch Image and Overlay Base 64

Spencer Barfuss

October 08, 2020 20:26

So, I have pictures outside of Cloudinary that I'm wanting to FETCH...Let's use this one below as an example...

https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VJsIvcVLweI8GMkIWmKt/pub/avjJmfuEZAfSRgrnMHRK.jpg 

Then, I want to overlay a 1px image stored in Cloudinary, resized of course to how I want it. Here's an example of what I want below...

https://res.cloudinary.com/hoovercfisd/image/upload/f_auto,q_auto/w_200,h_200,r_10/e_colorize,co_rgb:754088/l_text:Arial_100_bold_center:1,co_rgb:FFFFFF/v1586112243/1px.png 

I know that you have to do BASE64 to the overlay, but I can't seem to put it all together. 

Can you help me out? Thanks so much!

0

• 

  Francis Tagbo

  October 09, 2020 08:09

  Hi Spencer,

  Yes, you can overlay the base64 encoded URL of the remote image. As per my understanding, you want to fetch the remote URL: "https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VJsIvcVLweI8GMkIWmKt/pub/avjJmfuEZAfSRgrnMHRK.jpg" and overlay the image "https://res.cloudinary.com/hoovercfisd/image/upload/f_auto,q_auto/w_200,h_200,r_10/e_colorize,co_rgb:754088/l_text:Arial_100_bold_center:1,co_rgb:FFFFFF/v1586112243/1px.png" onto it.

  If my understanding is correct, then you can overlay the base64 encoded URL of the 1px image using the parameter l_fetch. Here is the resulting URL: https://res.cloudinary.com/hoovercfisd/image/fetch/w_500,h_500/l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vaG9vdmVyY2Zpc2QvaW1hZ2UvdXBsb2FkL2ZfYXV0byxxX2F1dG8vd18yMDAsaF8yMDAscl8xMC9lX2NvbG9yaXplLGNvX3JnYjo3NTQwODgvbF90ZXh0OkFyaWFsXzEwMF9ib2xkX2NlbnRlcjoxLGNvX3JnYjpGRkZGRkYvdjE1ODYxMTIyNDMvMXB4LnBuZw==/fl_layer_apply,g_south_east/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VJsIvcVLweI8GMkIWmKt/pub/avjJmfuEZAfSRgrnMHRK.jpg 

  Please let me know if this helps.

  Regards,

  Francis

  0

Post is closed for comments.