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

Transloadit does not add a watermark client side (in the browser). The watermark is added to the image after uploading it to transloadit. — MiniGod, Jan 15 '14 at 14:20
Check this answer : http://stackoverflow.com/questions/10841367/how-do-i-add-a-watermark-to-an-image-client-side-with-javascript — Alexander, Jan 15 '14 at 14:21

score 2 · Accepted Answer · answered Jan 15 '14 at 15:21

2

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?

answered Jan 15 '14 at 15:21

nil

2,238
1
19
28

Hi i try do it yesterday i add that key after get an account in that page but i get error with the action /uploadas i dont know why im using asp.net maybe for it still i dont know – Jan 15 '14 at 15:49
this is my key f0e6e4d07d5611e3999cb13d9daf30a6 try but maybe you will get error with the action – Jan 15 '14 at 15:51
Hey sorry @user3010718, I'm not too, too experienced with asp and I've never used this service. But at a glance it looks like you may need to send your Auth-secret within the application. I see out-of-the-box they include php and rails code snippets. Are you using some kind of cms with a plugin or extension that supports this service? Otherwise with whatever platform you're using there are ways for your server to do this. Look into asp solutions related to your versions, frameworks, or what have you. – nil Jan 15 '14 at 17:14

score 0 · Answer 2 · answered Oct 04 '14 at 17:19

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

How Add a Watermark in an Image with JavaScript or JQuery

2 Answers2