Is it possible to use cropped images as overlays?

I have users uploading logos which they can crop, so that when I display the logo on the site, the URL needs to be something like

https://ucarecdn.com/{uuid}/-/crop/299x341/0,94/

I’d like to then use this cropped logo as an overlay for another image. Is that possible? At the moment I can only figure out how to overlay the original uncropped version.

cheers,
Nick

Hi @nickeday,

Thanks for the question! By design, the “overlay” operation doesn’t allow applying image transformations to the overlay image. All the operations in a URL containing the “overlay” modifier are applied to the original image.

The only way to avoid it is to create a copy of the modified logo to “bake” its transformations.

On the backend, you can do this with REST API (create a local copy).

On the frontend, you can use JS API of the widget and its fileFrom method with 'url' as the first argument. For example,

const logoEdited = uploadcare.fileFrom('url', 'https://ucarecdn.com/{uuid}/-/crop/299x341/0,94/')
logoEdited.done(fileInfo => {
  const logoEditedUUID = fileInfo.uuid
  const overlayImageURL = `https://ucarecdn.com/{some_uuid}/-/overlay/${logoEditedUUID}/100px100p/center/`
})

thanks @Alex, this what exactly what I needed :+1:

@nickeday Glad to help!