如何在Angular 4中引入watermark.js并实现图片加水印？

嘿，我来帮你搞定这个问题！你碰到的cannot find module 'watermark'错误，大概率是踩了两个小坑：要么装错了npm包，要么TypeScript找不到对应的类型定义文件。下面给你一步步的正确实现方案：

第一步：安装正确的依赖包 #

你之前装的watermark包其实不是咱们常用的那个图片加水印的watermark.js库（那个是另一个工具），正确的watermark.js对应的npm包是watermarkjs。先把之前的包卸掉，再装正确的：

npm uninstall watermark --save
npm install watermarkjs --save

因为Angular 4用的是TypeScript，为了让编辑器不报错，最好再装对应的类型定义文件：

npm install @types/watermarkjs --save-dev

第二步：正确导入并使用 #

在你的Angular组件里，这么导入watermarkjs就没问题了：

import * as watermark from 'watermarkjs';

接下来就可以写加水印的方法了，比如给按钮加个点击事件触发：

addWatermark() {
  // 获取页面上要加水印的图片元素
  const targetImg = document.getElementById('need-watermark') as HTMLImageElement;
  
  // 这里以右下角的文字水印为例，你也可以换成图片水印
  watermark([targetImg])
    .image(watermark.text.lowerRight('我的专属水印', '18px Microsoft YaHei', '#ffffff', 0.6))
    .then(markedImg => {
      // 把加好水印的图片替换原图片
      targetImg.src = markedImg.src;
    });
}

然后在组件的模板里，放好图片和触发按钮：

<img id="need-watermark" src="/assets/my-photo.jpg" alt="待加水印图片">
<button (click)="addWatermark()">添加水印</button>

如果你非要用之前的watermark包 #

要是你确实想继续用你一开始装的watermark包（不是watermarkjs），因为它没有官方的TypeScript类型定义，你得手动声明一下这个模块：

1. 在你的项目src目录下创建一个typings.d.ts文件（如果还没有的话），然后加这段代码：

declare module 'watermark' {
  const watermark: any;
  export default watermark;
}

2. 然后在组件里这么导入：

import watermark from 'watermark';

不过得提醒你，这个包的API和watermarkjs不一样，而且功能没那么完善，更推荐用watermarkjs来做图片加水印。

最后注意点 #

• 要确保你的图片是同源的，或者服务器配置了CORS，不然浏览器的同源策略会阻止watermarkjs处理跨域图片哦。
• 本地开发的话，把图片放在assets目录里，路径别写错了。

内容的提问来源于stack exchange，提问作者Dhirish