如何在使用JavaScript的圖像中應用水印？

Question

我正在使用angularJS，並需要通過調用JS函數在圖像中應用水印程序。我所擁有的是：

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

所以，我需要調用該函數applyWatermark（尚未實現），並與水印返回IMG，但我不知道我怎樣才能建立這個功能。它是否應該返回圖像？有人可以提供我一些例子，我怎麼能做到這一點？

編輯：

我這樣做，但它不工作：

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

任何想法？

Answer 1

使用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); 
    }); 

如果這不適合你，也許試試這個：

$.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. 
    } 
}); 

測試如果處理前的圖像存在。