【积跬步以至千里】富文本编辑器下博客图片水印设置教程（简单易学）

写博客的时候，大家都会留意到有水印，博客自带的水印可能是无法满足大家需求的，这个时候，就需要自己进行水印设置，网上相关教程很多，鱼龙混杂，无非就是原创的，复制粘贴标注成原创的和转载的。但是由于博客在更新，很多东西现在已经不能再使用，或者使用方式已经有所改变。

为了能让大家能清晰地看到效果，有些水印我会设置的比较夸张，而且全文不会出现相同的水印。希望大家能够理解。

一、Markdown编辑器与富文本编辑器

网上现有的基本上都是对Markdown编辑器进行讲解，但是很多人更习惯用富文本编辑器。这里给大家说明一下：-Markdown编辑器是写博客时左上角第一个编辑器，富文本编辑器是Markdown编辑器下面那个。

富文本编辑器更简单易用，-Markdown编辑器功能更加强大。大家根据自己需要选择自己使用的编辑器。我写博客对于美观程度没有太多要求，只要看着整洁即可。更多的是希望用最快的时间写出一篇优质的博客，而不是一个绚丽的博客。当然如果你希望自己的博客内容除了知识丰富，界面更美观，格式更加多样化，极力推荐大家使用Markdown编辑器，因为功能真的很强大。

Markdown编辑器中的所有格式都是通过代码完成，而富文本编辑器中的所有格式都是通过点击设置完成。这两者像极了黑窗体和Windows，一个主要靠输入，一个主要靠单击。

二、图片水印修改

对于Markdown编辑器来说，设置水印就是写代码完成，需要大家了解它的原理及相关语句。什么大小啊，字体啊，阴影啊，颜色啊，透明度啊等等。如果你学过CSS，想想那些格式，所以对于一个更加专注于自己技术的猴子们，我们还是考虑考虑富文本编辑器中是如何实现图片水印格式修改的吧。

当我们在文章中添加一个图片时，我们双击它，会有下面这个界面，我们可以设置图片位置、尺寸、图注。但是你有没有观察过URL呢？

如果你已经对这个链接里面的内容有很深刻的了解，那我想你就应该能知道我们如何设置图片的水印，对没错，我们需要修改里面的一些参数，只需要明白参数含义，对其修改就可以了。

以下图为例：

图中的水印是添加图片后的默认水印，我们把它的URL复制出来，进行研究。

https://s2.51cto.com/images/blog/202209/07094517_6317f7ad0259141669.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

很长一串，不要怕，我们把它分解一下，一部分内容占一行，为了方便大家观看，我中间多空一行。大家对于watermark，shadow，size，color应该都不陌生，肯定认识，并且对于其后面的内容也能明白是干嘛的，最主要的就是type和text还有最后的t。

type是水印的字体，后面那一串数字是一种编码方式，人称“BASE64加密算法”，对于这种编码方式，我们有在线的​​BASE64加密解密网站​​。

我们将后面两串数字分别粘贴到后面的方框中：

首先是type后面的字符转化，我们根据拼音，就能知道是方正黑体。

type后面的字符转化

接下来是text后面的字符转化，我们能看到就是水印的文字。

text后面的字符转化

如果我们想要修改水印文字，就在明文处写内容，将转化后的BASE码写到图片中，就可以了。例如，我们将水印内容修改为：shuiyixin的博客。

就会得到下面的图

第二幅图中，我将水印设置为下面的内容：

type_ZmFuZ3poZW5naGVpdGk,
shadow_5,
text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg==,
size_56,
color_F41F75,
t_10

我们就会得到下面的图：

大家这次就能发现，t设置的是透明度，t越小，越透明。所以想要水印消失的一个方法就是将t设为0，将shadow也设为0，不然它会有阴影哒。

除此之外要给大家说的就是color，因为图片的颜色是有三原色的，及RGB，每个颜色的取值都是0-255，转化为16进制，就是00-FF。大家可以自己修改color值，就会得到不同颜色的水印啦。

今天的内容就先讲到这里，大家有什么问题，可以给我留言哦。