Keeping your watermarks safe

With Uploadcare, you can add watermarks to images on-the-fly using the overlay CDN operation. There’s even a detailed tutorial about that.

The thing is, applying watermarks is as simple as typing in a proper URL. Thus, by just looking at a URL you made, another person may guess how to edit it to get rid of watermarks. This article presents the solution that will help you keep watermarks in place. Leaping ahead, we’ll make use of the REST API for that.

If we were using some image processing software, we’d need to merge the two layers: an image and a watermark. To get this done in our case, we’ll need to make a copy of a processed image using our REST API. A new UUID is assigned to an image copy. So, you will then be able to operate with the two image versions: the original and the processed one. Hence, you can show a full-sized version with watermarks to your clients and generate thumbnails from the original. Don’t forget to create copies of the thumbnail image versions too, because resize is also performed on-the-fly and can be canceled by altering the URL.

Let’s get practical and break the task into four simple steps.

Step 1. Pick an image.

Please note that we’re working with images that have already been uploaded to Uploadcare. We’re going to use the pineapple image which is well-known after the watermarks tutorial. The URL we constructed to show you the image looks like this,

https://ucarecdn.com/117a213f-94f5-453c-8533-ebde3c700d3b/-/preview/640x640/
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Step 2. Add a watermark.

Here, we add a watermark to the pineapple image by using the overlay CDN operation. The syntax used is as follows,

-/overlay/46d27658-220b-41e5-bf35-b71cc05ebcab/30p,50p/-/preview/640x640/

As you can see, the operation syntax is straight-forward. That is why security measures matter. The resulting image is shown below.

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Step 3. Copy the processed image.

Copy operations are generally performed using an Uploadcare library for your preferred language. But we’d like to uncover the basics of how copying is done using the raw REST API. This will help you understand what those libraries do.

So, in order to copy the processed image we need to make a request to https://api.uploadcare.com/files/. The use of the REST API is well documented here. We’ve used this example for our image,

bash $ curl -X POST \
-H "Authorization: Uploadcare.Simple public_key:private_key" \
-d "source=117a213f-94f5-453c-8533-ebde3c700d3b/-/overlay/4f9e7225-9917-4ad2-960c-0d0809430211/20p,60p/-/preview/640x640/" \
-d "store=true" \
"https://api.uploadcare.com/files/"

As you can see, both public and secret keys are needed to make the copy request. The keys are needed to make any request for authentication purposes.

Of course, you should be using a key pair assigned to one of your Uploadcare projects. It’s important to notice that we’ve used the image UUID together with all the operations applied as a source. This means that the image copy will both have the watermark and be resized to fit 640 pixels along its largest dimension.

Step 4. Load the processed copy.

Once the request is made, a new file appears in your project. In our case, that’s a file where the underlying image is merged with the overlay, this one,

https://ucarecdn.com/72659dd2-19d8-460d-961a-329424f2ba8a/

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

It’s clear that the URL changed. It only contains a newly assigned UUID; no operations are present. As the watermark has become static, we may no longer worry about someone easily expelling it from the image.

It’s worth pointing out that fixing overlays is not the only use of the copy procedure. Even in this example, it was also used to provide a smaller image. We’re excited with use cases that might come to your mind while looking through the complete list of CDN operations.

Is it possible to do additional actions such as watermark overlay and generation of a different preview pic without additional making API-calls? During the first upload process?

Not at the moment, but we are considering adding this functionality in our future updates.