当我们利用CSDN MarkDown进行博客撰写的时候，需要上传图片，上传完的图片很难进行调整。然后有一个发现，就是图片上传的同时，会产生一段代码，虽然官方没有提供关于图片的设置问题，但是咱可以在这段代码上做做文章，来实现一些类似图像居中等基本的操作。
小图像居中
直接把图像往浏览器上一拖，图像就这么插入了，然后出现了这么一串字符串，这里可以添加对图片的描述，不过感觉好像没什么用，毕竟在阅读的时候，鼠标放上去就变成了放大按钮，唯一能看到的就是通过F12快捷键进行查看网页源码的时候。这个字符串就很好理解嘛，就一个图片的链接，我们把这个链接复制到浏览器上，按下确认，就可以看到这个图片了。
上面那个图就这样放着，也不好看啊，怎么让他居中呢，查了蛮多的资料，有看到说用HTML的<div>样式的，就是加上<div align=center>标签的，但是实测发现都是无效的，最终发现有用的方式有两种。
#pic_center
第一种就是利用#pic_center，在原先的字符串后面直接添加#pic_center，效果如下：
上图的代码为
<center> <img src="">
第二种就是利用<center>这个标签，并配套使用<img src="">这个标签，需要把图像的地址复制过来，效果如下：
<center> <img src="https://i-blog.csdnimg.cn/blog_migrate/d8d2c337faa7df87348fccd4662aa622.png"> </center>
这里也是借鉴了HTML的写法。
小图像调节尺寸
上面讲了讲图像进行居中，那是否可以调节尺寸了，答案也是可以的，方法也有两种。
=Width x Height
咱们图片的大小是261x58像素的，即宽为261像素，长为58像素，假如说我觉得默认图片太小了，要放大，可以后面自定义图像尺寸，效果如下：
如上的代码为：，需要注意的=522x116之前是有一个空格的，这样的话，就是把图片的长宽都进行了放大，当然没说一定要等比例放大啊，反正就是个resize操作，随便resize呗，比如下面这样，这样就很像乱七八糟网站上看到的图标。
如上的代码为：。
width=X%
这种方法要与前面的<center>是类似的，这里的X%是占整个页面的比例，如果占比100%就是以下的情形。
<center> <img src="https://i-blog.csdnimg.cn/blog_migrate/d8d2c337faa7df87348fccd4662aa622.png" width=100%></center>
大图像居中
直接把大图放上来是这样的，居左，底下有白色的水印，水印内容就是我的博客地址。
如上代码为：
pic_center
居中的话，我们就直接采用与小图像一致的方式，在最后t_70之后加上#pic_center，效果如下：
如上代码为：
<center> <img src="">
当然同样的，我们也可以使用<center>指令，把整一串字符串全部导过来，效果如下：
<center> <img src="https://i-blog.csdnimg.cn/blog_migrate/9a155727e66ec7ec4e5a9964daeb2395.png"></center>
然后我们对这串代码里的x-oss_process产生了兴趣，去百度了一下，发现这是一个图像处理的功能，后面的=image/watermark就是添加图像水印的意思。→→→图像处理操作指南
有了这个操作之后，我们就可以做一些有意思的事情了，要想干啥，直接利用代码进行操作。
去掉水印
如上代码为：
尺度缩放
如上代码为：
裁剪
如上代码为：
旋转
如上代码为：
模糊
如上代码为：
同时进行多种处理
如上代码为：
再来说一说水印
前面我们讲到，可以取消水印，当然我们也可以更改水印，这是一开始的水印，我做一些更改。
如上代码为：
这里的What a beautiful world!就是我添加的水印。稍微解释一下这个代码，type_ZmFuZ3poZW5na2FpdGk=表示字体是方正楷体，shadow_0表示无阴影，text_V2hhdCBhIGJlYXV0aWZ1bCB3b3JsZCE=表示文字内容为What a beautiful world!，size_30表示大小为30，color_0000FF表示颜色为蓝色，t_100表示不透明，g_south表示位于底部。这里的文字内容，字体涉及到了Base64格式的问题，在这里不过多介绍，关于水印的详细内容，可以参考阿里云给的说明文档，→→→传输门
大图和小图实际是一样的
写到这里，不禁就在想，为什么有大图和小图之分呢，本质上不都是一张图片么，只不过这个图片的尺寸不同。在这样的想法之下，我就尝试用大图片的x-oss-process来对小图像进行处理了，于是出现了下面一张图。
如上代码为：，也就是在图中添加了一个蓝色的水印，也就是说，我们完全可以用大图像的o-xss-process来对小图像进行处理，从而大图像和小图像中间存在的所谓壁垒就打通了，心头的疑虑也解决了。
不过这样，又多出来两个问题，首先第一个，为什么小图像不进行加水印处理呢，而大图像需要加呢。对于这一点，我的猜想是小图像加了水印之后，会覆盖图像中的内容，而这些内容可能蛮重要的，缺失这些内容对博客理解有较大影响，而大图像主要是为了保护博主的权益，不然别人把你的博文复制一些，发到自己的博客上，有了水印这东西，总还是有点作用的。
防火防盗防程序员
前面说了，加水印能保护博主的权益，但是吧，这东西防君子不防小人，千防万防防不住程序员啊。关于这个图片的内容咱都讲了这么多了，他处理的原理也都分析清楚了，不就是x-oss-process嘛，一个动态的处理方式，别人盗图，直接图片上单击右键，选择图片另存为，咱程序员可不能这么干，下面就教你如何盗取无水印的图片，咱们以这篇博客里面的图片为例，这篇博客里面有这么一张图，如下就是你看到的图片的样子，右下角呢，就是这个图片的水印，咱如何盗取无水印的呢。
首先说明一点，博主用的是标准程序员浏览器—Chrome，我们在这个图片上单击右键->检查，可以看到<img src="https://img-blog.csdnimg.cn/20200429161431892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVfbGpx,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">这么一段代码，这不就是咱写博客的时候插入图片的代码嘛，得嘞，把x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVfbGpx,size_16,color_FFFFFF,t_70这一段都删掉，可以了，这时候左边就是一张没有水印的图片了，这时候在图片上单击右键将图片另存为就行了，无水印盗图完成，大功告成，击掌欢呼~
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
