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

어떤 생각을? watermark.js를 사용

Answer 1

이 당신을 위해 작동하지 않는 경우

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

테스트 할 수 있습니다.