vue项目中图片显示前端使用js添加水印

需求：在项目中为了防止截图或者下载导致内部图片泄露，或者图片传播溯源，需要将项目中展示的图片添加上属于自己公司的水印标识。

解决思路：
1、 先将img图片绘制为canvas
2、 使用canva 绘制所要自定义添加的内容标识
3、 再将绘制好的canvas转为base64的地址使用img显示出来
代码及步骤注释如下（可以直接看效果显示）：

效果如下图：

参考解决方案原博客地址：https://musicfe.cn/page/15
And ：https://blog.csdn.net/qq_39041201/article/details/107880439