Watermark image with username CSS

Question

We have a website that shares some images that can't be released before a certain date. Users login with a username and password. I was wondering if its possible to watermark every image with the username that logged in to discourage sharing of those images? Website as far as i know is codded in java/CSS.

Hope this is enough is get some kind of lead!

EDIT :

Seems i had info lacking in huge amounts...here is more

Server-side Programming Language Microsoft's Active Server Pages technology on the .NET framework. ASP.NET

Client-side Programming Language JavaScript is a lightweight, object-oriented, cross-platform scripting language, mainly used within web pages. JavaScript

JavaScript Libraries jQuery is a JavaScript library that simplifies HTML document traversing, event handling, animating and Ajax interaction. Originally developed by John Resig. jQuery 1.12.4 (8% of sites use a newer version)

Bootstrap is an open source HTML, CSS, and JavaScript framework. Bootstrap

Markup Language HTML5 is the fifth revision of the HTML standard.

watermark can be made on server side, while user upload image. (if you have php, then it has some library for that). javascript or css will not do anything about it, only lay something on top of it. — G-Cyrillus, May 24 '17 at 13:48
Welcome to the SO community. There's not enough information here about the architecture or platforms that you are currently using for anyone to provide a reasonable answer. `java/CSS` makes little sense to experienced developers. Server-side you should determine if you're using Java, PHP, ASP.NET, ColdFusion or some other architecture. — Kallum Tanton, May 24 '17 at 13:50
He is saying that he is using Java, a server-side technology. This is enough to information to be able to solve this problem. — broodjetom, May 24 '17 at 13:51
The term "java" is combined with "CSS" - the majority of the time this is done is because the user has confused "Java" with "JavaScript" which is not server side. — Kallum Tanton, May 24 '17 at 13:53
I assumed he meant JavaScript :) Why pair it with CSS if he/she legit uses Java on back-end? — DanteTheSmith, May 24 '17 at 14:38

score 0 · Answer 1 · answered May 24 '17 at 13:50

You cannot watermark with CSS. This must be done on server-side since this is where you have the ability to process and modify files. Since you are using Java, there is probably a library out there that can help you with this.

Do this watermarking when a picture is uploaded. Add the watermark and then save it somewhere.

How can I watermark an image in Java?

DanteTheSmith · Answer 2 · 2017-05-24T14:55:29.863

Basically, all you said is I have a website and the problem. Off course your front is coded in JS, not like you have much more options, and ofc you use CSS for styling, and you use HTML for structuring and maybe even semantics of your web pages, right?

We could all have assumed that setup :)

The problem is you probably wanna do this on the back-end (server side). And you have not stated what you use in that part of your application.

If you insist on doing this on front-side (using JS), you can use HTML5 and one of its new elements called Canvas

Here is a basic fiddle I made, it's pretty straightforward: fiddle me diddle

     var canvas = document.getElementById('viewport'),
  context = canvas.getContext('2d');

function drawIt() {
  base_image = new Image();
  base_image.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPBj_avFTxiKBETiND86_i-xQTDOMVYEXB0kaeh3uPOTfvfA3n';
  context.font = "30px Georgia";
  context.canvas.width = 500;
  context.canvas.height = 500;
  context.drawImage(base_image, 0, 0);
  context.fillText("FEAR the DERP powaa", 50, 180);
}

drawIt();

! NOTE ! Any educated user will be able to get the original picture (just not with right click - save image as.. )

Why?

The image has to be accessed in its original form from somewhere and then put in canvas. Since this "putting in" happens in user's browser, his browser must have obtained the original image (without text), and a smart user would know hoe to find it.

This is the main reason you should do it on the server before sending the image to user's browser. Then all browser sees is the altered image (with text).

Thank you for this. I will look at this and keep in mind that part where it should be done before sending to browser! — Bryan Dery, May 24 '17 at 14:45

Watermark image with username CSS

2 Answers2