如何使用JavaScript在图像中应用水印？

我正在使用angularJS，需要通过调用JS函数在图像中编程应用水印。我得到的是：

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

有什么想法吗？

使用：

如果这对您不起作用，可以尝试以下方法：

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

---

在处理前测试图像是否存在

这不是个好主意。用户始终可以从源代码处获取原始图像。虽然这对某些用户很有用，但在客户端对某些内容进行水印并非真正的解决方案，因为在使用客户端代码对原始图像进行水印之前，您将已将原始图像传输到客户端。您好，谢谢您的回答。我尝试了你描述的这种方式，但不起作用，请检查我在原始帖子中的编辑。你知道我该如何解决这个问题吗？只要

image

是服务器上图像的路径，并且你已经正确引用了

watermark.js

库，它肯定会工作。我正在使用这个watermark.js。但它会在转换后创建大文件（3MB到9MB）。如何减少文件大小有什么想法吗？这里有一个想法：首先

npm安装sharp

，然后在代码中

const sharp=require（'sharp'）；sharp（inputBuffer）.resize（320240）.toFile（'output.webp'，（err，info）=>…）。本项目的Gtihub：
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.
    }
});