How Add a Watermark in an Image with JavaScript or JQuery

Question

Hi guys i have a little problem. I want add a watermark in an image with javascript or jquery something like this url https://transloadit.com/demos/image-resize/watermarking. I search for many hours but i cannot find something to this. Maybe somebody could help me. Thanks

Answer 1

You can't do something "like that URL" with just javascript. Using a service such as the url you specified, they're doing the processing: watermarks, crops, resizing, etc. They offer a few ways for users to implement it. If you decide you wanted to use their service along with you're own frontend javascript application, for client-side use, then you could simply use javascript, along with their API.

It looks like their JS example shows including the authorization key:

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

Which is how they charge for their service.

It sounds like you're a little new, so you're going to have to understand client-side vs server-side.

You can use something like imagemagick to do this on your own server. What language is your site in, or intended to be in?

Answer 2

this is my transloadit template, watermarking perfectly works once a person uploads a picture. For picture links they provide(in case I don't use transloadit) I use watermark.js to add them dynamic watermarks

{
  "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"
    }
  }
}