带有用户名CSS的水印图像

带有用户名CSS的水印图像,css,watermark,Css,Watermark,我们有一个网站,分享一些图片,不能在某个日期前发布。用户使用用户名和密码登录。我想知道是否有可能用登录的用户名对每个图像进行水印,以阻止共享这些图像?据我所知,这个网站是用java/CSS编码的 希望这足够让你得到一些线索 编辑: 似乎我有大量的信息缺乏…这里有更多 服务器端编程语言 Microsoft在.NET framework上的Active Server Pages技术。 ASP.NET 客户端编程语言 JavaScript是一种轻量级、面向对象、跨平台的脚本语言,主要用于网页。 Jav

我们有一个网站,分享一些图片,不能在某个日期前发布。用户使用用户名和密码登录。我想知道是否有可能用登录的用户名对每个图像进行水印,以阻止共享这些图像?据我所知,这个网站是用java/CSS编码的

希望这足够让你得到一些线索

编辑:

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

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

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

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

Bootstrap是一个开源的HTML、CSS和JavaScript框架。 引导

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

您不能使用CSS添加水印。这必须在服务器端完成,因为您可以在服务器端处理和修改文件。因为您使用的是Java,所以可能有一个库可以帮助您实现这一点

上传图片时执行此操作。添加水印,然后将其保存到某个位置


基本上,你所说的是我有一个网站和问题。当然,你的前端是用JS编码的,不像你有更多的选择,ofc你用CSS来设计样式,你用HTML来构造网页,甚至是语义,对吗

我们都可以假设设置:

问题是您可能希望在后端服务器端执行此操作。您还没有说明您在应用程序的该部分中使用了什么

如果您坚持使用JS在前端执行此操作,则可以使用HTML5及其一个名为Canvas的新元素

这是我做的一把基本小提琴,非常简单:

!!笔记 任何受过教育的用户都可以获得原始图片,而不是右键单击-将图像另存为

为什么?

必须从某处以原始形式访问图像,然后将其放入画布中。由于这种输入是在用户的浏览器中进行的,所以他的浏览器必须获得没有文本的原始图像,聪明的用户应该知道如何找到它


这是您在将图像发送到用户浏览器之前应该在服务器上执行此操作的主要原因。然后,浏览器看到的所有内容都是修改后的图像和文本。

用户上传图像时,可以在服务器端制作水印。如果您有php,那么它就有一些用于此的库。javascript或css不会对它做任何事情,只是在它上面放一些东西。欢迎来到SO社区。这里没有足够的关于您当前使用的体系结构或平台的信息供任何人提供合理的答案。java/CSS对于经验丰富的开发人员来说意义不大。服务器端您应该确定您使用的是Java、PHP、ASP.NET、ColdFusion还是其他架构。这足以提供信息来解决这个问题。java这个词与CSS结合在一起——大多数情况下,这是因为用户将java与非服务器端的JavaScript混淆了。我想他指的是JavaScript:如果他/她在后端合法使用java,为什么要将其与CSS结合起来?谢谢。我会看看这一点,并记住这一部分,它应该在发送到浏览器之前完成!
     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();