当我们利用CSDN MarkDown进行博客撰写的时候,需要上传图片,上传完的图片很难进行调整。然后有一个发现,就是图片上传的同时,会产生一段代码,虽然官方没有提供关于图片的设置问题,但是咱可以在这段代码上做做文章,来实现一些类似图像居中等基本的操作。
小图像居中
直接把图像往浏览器上一拖,图像就这么插入了,然后出现了这么一串字符串![在这里插入图片描述](https://img-blog.csdnimg.cn/20200429233423989.png)
,这里可以添加对图片的描述,不过感觉好像没什么用,毕竟在阅读的时候,鼠标放上去就变成了放大按钮,唯一能看到的就是通过F12
快捷键进行查看网页源码的时候。这个字符串就很好理解嘛,就一个图片的链接,我们把这个链接复制到浏览器上,按下确认,就可以看到这个图片了。
上面那个图就这样放着,也不好看啊,怎么让他居中呢,查了蛮多的资料,有看到说用HTML的<div>
样式的,就是加上<div align=center>
标签的,但是实测发现都是无效的,最终发现有用的方式有两种。
#pic_center
第一种就是利用#pic_center
,在原先的字符串后面直接添加#pic_center
,效果如下:
上图的代码为![](https://img-blog.csdnimg.cn/20200430134238362.png#pic_center)
<center> <img src="">
第二种就是利用<center>
这个标签,并配套使用<img src="">
这个标签,需要把图像的地址复制过来,效果如下:
<center> <img src="https://img-blog.csdnimg.cn/20200430134238362.png"> </center>
这里也是借鉴了HTML的写法。
小图像调节尺寸
上面讲了讲图像进行居中,那是否可以调节尺寸了,答案也是可以的,方法也有两种。
=Width x Height
咱们图片的大小是261x58像素的,即宽为261像素,长为58像素,假如说我觉得默认图片太小了,要放大,可以后面自定义图像尺寸,效果如下:
如上的代码为:![](https://img-blog.csdnimg.cn/20200429233423989.png#pic_center =522x116)
,需要注意的=522x116
之前是有一个空格的,这样的话,就是把图片的长宽都进行了放大,当然没说一定要等比例放大啊,反正就是个resize
操作,随便resize
呗,比如下面这样,这样就很像乱七八糟网站上看到的图标。
如上的代码为:![](https://img-blog.csdnimg.cn/20200430134238362.png#pic_center =300x300)
。
width=X%
这种方法要与前面的<center>
是类似的,这里的X%
是占整个页面的比例,如果占比100%就是以下的情形。
<center> <img src="https://img-blog.csdnimg.cn/20200430134238362.png" width=100%></center>
大图像居中
直接把大图放上来是这样的,居左,底下有白色的水印,水印内容就是我的博客地址。
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVfbGpx,size_16,color_FFFFFF,t_70)
pic_center
居中的话,我们就直接采用与小图像一致的方式,在最后t_70
之后加上#pic_center
,效果如下:
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png#pic_center?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVfbGpx,size_16,color_FFFFFF,t_70)
<center> <img src="">
当然同样的,我们也可以使用<center>
指令,把整一串字符串全部导过来,效果如下:
<center> <img src="https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVfbGpx,size_16,color_FFFFFF,t_70"></center>
然后我们对这串代码里的x-oss_process
产生了兴趣,去百度了一下,发现这是一个图像处理的功能,后面的=image/watermark
就是添加图像水印的意思。→→→图像处理操作指南
有了这个操作之后,我们就可以做一些有意思的事情了,要想干啥,直接利用代码进行操作。
去掉水印
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png#pic_center)
尺度缩放
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/resize,h_100#pic_center)
裁剪
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/circle,r_150#pic_center)
旋转
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/rotate,90#pic_center)
模糊
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/blur,r_5,s_5#pic_center)
同时进行多种处理
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/blur,r_5,s_5/rounded-corners,r_80/rotate,180/contrast,-100#pic_center)
再来说一说水印
前面我们讲到,可以取消水印,当然我们也可以更改水印,这是一开始的水印,我做一些更改。
如上代码为:![](https://img-blog.csdnimg.cn/20200430140138648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5na2FpdGk=,shadow_0,text_V2hhdCBhIGJlYXV0aWZ1bCB3b3JsZCE=,size_30,color_0000FF,t_100,g_south#pic_center)
这里的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
来对小图像进行处理了,于是出现了下面一张图。
如上代码为:![](https://img-blog.csdnimg.cn/20200430134238362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5na2FpdGk=,shadow_0,text_V2hhdCBhIGJlYXV0aWZ1bCB3b3JsZCE=,size_15,color_0000FF,t_100,g_center#pic_center)
,也就是在图中添加了一个蓝色的水印,也就是说,我们完全可以用大图像的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
这一段都删掉,可以了,这时候左边就是一张没有水印的图片了,这时候在图片上单击右键将图片另存为就行了,无水印盗图完成,大功告成,击掌欢呼~