用户名CSS的水印图像

时间:2017-05-24 13:46:04

标签: css watermark

我们有一个网站,分享一些在特定日期之前无法发布的图片。用户使用用户名和密码登录。我想知道是否可以使用登录的用户名为每个图像添加水印以阻止共享这些图像?据我所知,网站编号为java / CSS。

希望这足以获得某种领导力!

编辑:

似乎我的信息缺乏大量......这里有更多

服务器端编程语言 Microsoft框架上的Microsoft Active Server Pages技术。 ASP.NET

客户端编程语言 JavaScript是一种轻量级,面向对象的跨平台脚​​本语言,主要用于网页。 JavaScript

JavaScript库 jQuery是一个JavaScript库,可以简化HTML文档遍历,事件处理,动画和Ajax交互。最初由John Resig开发。 jQuery 1.12.4 (8%的网站使用较新版本)

Bootstrap是一个开源的HTML,CSS和JavaScript框架。 Bootstrap

标记语言 HTML5是HTML标准的第五个修订版。

2 个答案:

答案 0 :(得分:0)

你不能用CSS加水印。这必须在服务器端完成,因为这是您能够处理和修改文件的地方。由于您使用的是Java,因此可能有一个库可以帮助您解决这个问题。

上传图片时进行水印处理。添加水印然后将其保存在某处。

How can I watermark an image in Java?

答案 1 :(得分:0)

基本上,你说的只是我有一个网站和问题。当然你的前面是用JS编写的,不像你有更多的选择,而且你使用CSS进行样式化,你使用HTML进行结构化甚至是网页的语义,对吗?

我们都可以假设设置:)

问题是您可能想在后端(服务器端)执行此操作。而你还没有说明你在申请的这一部分使用了什么。

如果你坚持在前端(使用JS)这样做,你可以使用 HTML5 和一个名为画布

的新元素

这是我做的一个基本的小提琴,它很简单: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();

<强>!注意! 任何受过良好教育的用户都可以获得原始图片(只需点击右键即可 - 将图片另存为..)

为什么?

必须从某处以原始形式访问图像,然后将其放入画布中。因为这&#34;放入&#34;在用户的浏览器中,他的浏览器必须已经获得原始图像(没有文本),并且智能用户会知道锄头找到它。

这是在将图像发送到用户浏览器之前在服务器上执行此操作的主要原因。然后所有浏览器看到的是更改后的图像(带有文本)。