如何使用JavaScript在图像客户端添加水印? [英] How do I add a watermark to an image client-side with JavaScript?

问题描述

是否可以使用jquery在客户端的gif动画中添加水印(文本或图像).

Is it possible to add a watermark ( text or image ) to an animated gif , clientside using jquery.

在这种情况下，所有处理都是在客户端进行的.

In this instance all processing is client side.

我无法在jsfiddle上运行它.但是水印非常简单，即将水印添加到主图像中.

I cant get it to work on jsfiddle. But its very simple, the watermark is added to the main image.

我的问题是，我需要使用它来处理GIF动画.因此水印显示在右下角.

The issue I have is I need this to work on animated gifs. So the watermark displays bottom right hand corner.

主要js代码为: http://www.patrick-wied.at /static/watermarkjs/jq/

页面上的脚本:

var config = {
    "path": "watermark.png"
};
$(document).ready(function() {
    $(document).watermark(config);
});

我唯一的问题是，通常我们可以使用imagemagik gd和php等进行处理.但这必须在客户端起作用.所以有什么建议.

My only issue is, normally we could process this using imagemagik gd , and php etc.. but this must work clientside. So any suggestions please.

推荐答案

没有可用于物理更改原始图像文件本身的客户端JavaScript.但是，使用canvas元素可以播放图像数据.

There is no client side JavaScript that you can use to physically alter the original image file itself. However, using the canvas element you can play around with the image data.

您链接到的watermark.js脚本通过将图像绘制到canvas元素，然后将水印图像覆盖在顶部来工作.我相信它随后会使用img.src = canvas.toDataURL();之类的东西将原始图像源替换为画布数据.

The watermark.js script that you link to works by drawing the image to a canvas element and then writing the watermark image over top. I believe it then replaces the original image source with the canvas data using something like img.src = canvas.toDataURL();.

要使用动画gif做类似的事情，您将需要做更多的工作.特别是，您将需要将gif作为原始二进制文件获取，并解析出每一帧，然后执行上述操作.您还需要自己为gif动画，因为浏览器不再渲染它了.

To do something like this with an animated gif you will have a bit more work to do. In particular, you will need to get the gif as raw binary and parse out each frame and do something like above. You will also need to animate the gif yourself since the browser is no longer rendering it, you are.

针对该问题的答案是一个很好的起点.您还需要查看gif格式本身.

The answers posted to this question will be a good place to start. You will also need to look into the gif format itself.

所有这些，如果您想用水印保护图像，则需要在服务器端进行.只需禁用JavaScript和/或查看源代码以获取原始图像URL，就可以击败客户端所做的任何事情. watermark.js脚本也容易受到攻击.我认为这是一个有趣的练习，可能会阻止临时访客窃取图像.但是，任何有足够决心的人都可以轻松击败它.

All this being said, if you want to protect your image with a watermark you need to do it server side. Anything done on the client side can be defeated simply by disabling JavaScript and/or viewing source to grab the original image url. The watermark.js script is also vulnerable to the same. I think it's an interesting exercise and might deter a casual visitor from ripping off an image. However, anyone determined enough could defeat this easily.

这篇关于如何使用JavaScript在图像客户端添加水印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！