CODEWITHSUNDEEP
javascript
chr0x
chr0x

Reputation: 1251

How can I apply a watermark in images using JavaScript?

I'm using angularJS and need to apply a watermark programatelly in images by calling an JS function. What I have is:

<figure><img class="watermark" ng-src="{{applyWatermark(img.url)}}"></figure>

So, I need to call that function applyWatermark (not implemented yet) and return a img with the watermark, but I'm not sure how can I build this function. Should it return the image? Can someone provide me some example how can I do this?

EDIT:

I did this, but it's not working:

 $(function applyWatermark(image) {                                                                                                                                                                                                      
     watermark([image, 'watermark.png'])                                                                                                                       
       .image(watermark.image.lowerRight())                                                                                                                                                                                              
       .then(function (img) {                                                                                                                                                                                                            
           return img                                                                                                                                                                                                                    
       });                                                                                                                                                                                                                               
 })

Any idea?

Upvotes: 7

Views: 25363

Answers (1)

Nick Bull
Nick Bull

Reputation: 9866

Using watermark.js:

watermark(['/img/forest.jpg', '/img/logo.png'])
    .image(watermark.image.lowerRight(0.5)) // Or lowerRight() for no opacity
    .then(function (img) {
        document.getElementById('alpha-image').appendChild(img);
    });

If this doesn't work for you, maybe try this:

$.ajax({
    url: 'http://www.example.com/your-image.jpg',
    type: 'HEAD',
    error: function() {
        // File isn't found
    },
    success: function() {
        // File is found! Do the watermarkage.
    }
});

to test if the image exists before processing.

Upvotes: 7

Related Questions