OSS 图片水印使用,以及如何针对markdown上传的图片做批量水印添加

oss具体使用文档： https://help.aliyun.com/document_detail/44957.html

在线文字转base64编码入口： https://www.w3xue.com/tools/pt2base64/?t=1
一：几个dome的入门熟悉下：

h0: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,image_b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=",

h1: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,image_b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=,g_center",

h2: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,image_b25saW5lL3dhdGVybWFyay9jb3JwMS5qcGc=",

h3: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,text_Y3hsIGJsb2c=",

h4: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,text_Y3hsIGJsb2c=,size_60,g_center,color_FFFFFF,shadow_100,t_100",

h5: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,text_Y3hsIGJsb2c=,g_se,x_15,y_15",

原始的图片

<img :src="h0" alt="">

---

图片做水印，且本身是透明的，水印在图片中的位置是中部

<img :src="h1" alt="">

---

图片做水印，切不透明

<img :src="h2" alt="">

---

文字水印

 <img :src="h3" alt="">

---

文字水印 cxl blog,字体大小60px,居中,字体颜色白色,水印的阴影透明度不透明,水印的透明度不透明

<img :src="h4" alt="">

---

文字水印 cxl blog,水印文字位置是右下、水平边距15、中线垂直偏移15：

<img :src="h5" alt="">

---

二：几个小的知识点的讲解

?x-oss-process=image/watermark 水印的头 标配

水印的图片 ,image_b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=

水印图的位置居中 ,g_center

水印文字字体为文泉驿正黑：type_d3F5LXplbmhlaQ（d3F5LXplbmhlaQ是文泉驿正黑经过Base64编码后的值）

水印内容为“Oneby’s Blog”：text_T25lYnkncyBCbG9n

水印文字颜色为白色、字体大小为20：color_FFFFFF,size_20

文字阴影透明度为100%：shadow_100

水印透明度为100%：t_100

水印文字位置是右下、水平边距15、中线垂直偏移15：g_se,x_15,y_15

拓展: 无论是图片、文字、字体类型都是需要转成base64位的
b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=

这个通过base64 解码后为 online/watermark/zh1.jpg?x-oss-process=image/resize,P_90

这个通过base64 解码后为 online/watermark/corp1.jpg

三、返回的是markdown的数据，通过v-html渲染的情况下，处理添加水印

init() {
      let a = "<p><img src=\"https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的照片.jpg\" alt=\"\" width=\"900\" height=\"683\" /></p></n><p><img src=\"https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的照片.jpg\" alt=\"\" width=\"900\" height=\"683\" /></p>";
      this.watermark= a.replaceAll('\" alt=', '?x-oss-process=image/watermark,image_b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=,g_center&random=1644282701671' + '\" alt=');
    }

这是针对markdown返回的没有加水印，通过replaceAll添加水印的过程

<p v-html="watermark"></p>