在保存时添加徽标或水印 [关闭]

Question

当您在网站上展示图片时，水印或实现的徽标很烦人，但我也担心未经许可使用图片。

你们中的许多人可能知道 9gag 在 2016 年之前一直在使用它，当您从网站保存图片时，它会在保存的图片中添加 9gag 徽标。

老实说，我想不出任何方法来实现它。

我正在使用我的自定义 ASP.Net MVC 5 CMS，但任何前端解决方案都将受到高度赞赏。

编辑

根据 W3，我们可以通过 JavaScript 在画布中重新创建图像：

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};

由于我正在重绘图像，我认为理论上应该有一种方法可以合并两个图像。有没有办法截取进程并添加logo或水印？

Answer 1

短版：不要认为没有破解是可能的。如果您想在右下角添加水印，请复制每张图像底部的几个像素，将水印放在整张图像上，然后将原始角悬停在其上。

长版： 您无法拦截浏览器的“右键单击->将图像另存为”功能。您可以做的是一种 hack，其中底层图像具有水印，但您用图像的旧副本覆盖水印。如果您想将您的网站名称放在图片的右下角，请复制该图片的一小部分，然后将水印放在那里。现在，在您的应用程序中，将两个图像包装在一个具有相对定位的 div 中。将 div 设置为原始图像的大小，绝对定位和 top/left: 0px，然后将角放在顶部并执行 bottom/right: 0px。然后，如果他们右键单击除右下角以外的任何位置并保存，他们会得到下面的图像，其中有水印。