如何使用 JavaScript 或 JQuery 在图像中添加水印答案

【问题标题】：How Add a Watermark in an Image with JavaScript or JQuery如何使用 JavaScript 或 JQuery 在图像中添加水印
【发布时间】：2014-01-15 14:15:59
【问题描述】：

大家好，我有一个小问题。我想使用 javascript 或 jquery 在图像中添加水印，例如这个 url https://transloadit.com/demos/image-resize/watermarking。我搜索了很多小时，但我找不到任何东西。也许有人可以帮助我。谢谢

【问题讨论】：

Transloadit 不添加水印客户端（在浏览器中）。水印上传到transloadit后添加到图像中。
检查这个答案：stackoverflow.com/questions/10841367/…
嗯，我明白了，但是我怎么能这样做呢？请帮忙:)

标签： javascript jquery watermark

【解决方案1】：

您不能仅使用 javascript 来执行“类似该 URL”的操作。使用您指定的 url 之类的服务，他们正在处理：水印、裁剪、调整大小等。他们为用户提供了几种实现方式。如果您决定将他们的服务与您自己的前端 javascript 应用程序一起用于客户端使用，那么您可以简单地使用 javascript 以及他们的 API。

看起来他们的 JS 示例显示包括授权密钥：

    params: {
    auth: { key: "YOUR-AUTH-KEY" },

他们是如何收取服务费的。

听起来你有点新，所以你必须了解客户端与服务器端。

您可以使用 imagemagick 之类的工具在您自己的服务器上执行此操作。您的网站使用或打算使用哪种语言？

【讨论】：

嗨，我昨天尝试了，我在该页面中获得帐户后添加了该密钥，但操作 /upload 时出现错误，因为我不知道为什么我使用 asp.net 可能仍然我不知道
这是我的钥匙 f0e6e4d07d5611e3999cb13d9daf30a6 尝试，但也许你会在操作时出错
嘿，对不起@user3010718，我对asp 不太熟悉，而且我从未使用过这项服务。但乍一看，您可能需要在应用程序中发送您的 Auth-secret。我看到开箱即用的它们包括 php 和 rails 代码 sn-ps。您是否使用某种带有支持此服务的插件或扩展的 cms？否则，无论您使用什么平台，您的服务器都有办法做到这一点。查看与您的版本、框架或您拥有的东西相关的 asp 解决方案。

【解决方案2】：

这是我的 transloadit 模板，一旦有人上传图片，水印就可以完美运行。对于他们提供的图片链接（如果我不使用 transloadit），我使用 watermark.js 为它们添加动态水印

{
  "steps": {
    "resize": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 225,
      "height": 225,
      "resize_strategy": "crop"
    },
    "export": {
      "robot": "/s3/store",
      "key": "***********",
      "secret": "***********",
      "bucket": "************"
    },
    "resizebig": {
      "use": ":original",
      "robot": "/image/resize",
      "resize_strategy": "fit",
      "watermark_url": "https://www.dropbox.com/s/awyrna8zdvi08nx/Selection_031.png",
      "watermark_size": "25%",
      "watermark_position": "bottom-right"
    }
  }
}

【讨论】：