Skip to main content

Overlay an image that's taken from a fetched public URL

Shirly Manor
Updated

When adding an image overlay where the image is fetched from a different Cloudinary sub-account or from another external URL, this can be done by passing a base64-encoded version of the remote URL to the overlay transformation, with these two steps:


1. First, convert the public URL of the image you want to overlay to base 64.

You can use any third-party tool online, your own code, or the standard libraries and SDKs for the platform you're developing in.

For example, in Python:

import base64

encoded = base64.b64encode('http://res.cloudinary.com/demo/image/upload/cloudinary_icon') 

=> 'aHR0cDovL3Jlcy5jbG91ZGluYXJ5LmNvbS9kZW1vL2ltYWdlL3VwbG9hZC9jbG91ZGluYXJ5X2ljb24='

2.  Add this to your Cloudinary delivery URL in the `l_fetch` transformation option to add an overlay of the remote image: .../l_fetch_<base64 encoded URL of image>/...

Using Python as an example again:

import base64
encoded = base64.b64encode('http://res.cloudinary.com/demo/image/upload/cloudinary_icon')
url = "https://res.cloudinary.com/demo/image/upload/l_fetch:"+encoded+"/sample.png"

=> https://res.cloudinary.com/image/upload/demo/l_fetch:aHR0cDovL3Jlcy5jbG91ZGluYXJ5LmNvbS9kZW1vL2ltYWdlL3VwbG9hZC9jbG91ZGluYXJ5X2ljb24=/sample.png

The result will look like this:

http://res.cloudinary.com/demo/image/upload/l_fetch:aHR0cDovL3Jlcy5jbG91ZGluYXJ5LmNvbS9kZW1vL2ltYWdlL3VwbG9hZC9jbG91ZGluYXJ5X2ljb24=/sample.png

Related articles

Comments

4 comments

Date Votes
  • Jordan

    You went as far as to even provide an example, in addition to the description for step 1, then just kinda threw step 2 out there like we are all experts on Cloudinary

    0
  • Stephen Doyle
    Edited

    Hi Jordan,

    Thanks for your feedback.

    The example in the first part of this article is intended to help customers who aren't aware of how to create a base64 encoded string from the URL, but you're right that the example in the second part didn't have much context, it was was just showing how that base64 string looks when used with the l_fetch transformation option

    I've updated the article now with links to the main documentation for the fetch image feature, and some corresponding code to create the URL which should help customers who found this article but weren't familiar with the underlying feature before.

    Please let me know if there's anything else I can help with
    Regards,
    Stephen

    0
  • Refo Junior

    I following this document, but I still unable to fetch an external image. 

    For example, I try to change the demo cloud name to my own cloud name

    https://res.cloudinary.com/demo/image/upload/l_fetch:aHR0cDovL3Jlcy5jbG91ZGluYXJ5LmNvbS9zaGlybHkvaW1hZ2UvdXBsb2FkL2Nsb3VkaW5hcnlfaWNvbg==/sample.png

    to 

    https://res.cloudinary.com/di3mmydno/image/upload/l_fetch:aHR0cDovL3Jlcy5jbG91ZGluYXJ5LmNvbS9zaGlybHkvaW1hZ2UvdXBsb2FkL2Nsb3VkaW5hcnlfaWNvbg==/sample.png

    But I get this

    Basically, I just change the cloud name, and I have the sample image on my account. I always unable to fetch the external images, why this happens to my account?

    0
  • Millie Axelrod

    Hi,

    This error can be received if Fetched URL is currently marked as restricted in your account - to enable it head to https://cloudinary.com/console/settings/security and uncheck 'Fetched URL' under 'Restricted media types'.

    Hope this helps, please let us know if you have any further questions.

    Kind Regards,
    Millie

    0

Please sign in to leave a comment.