CSDN MarkDown图片插入及设置

MarkDown 专栏收录该内容
3 篇文章 0 订阅

  当我们利用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这一段都删掉,可以了,这时候左边就是一张没有水印的图片了,这时候在图片上单击右键将图片另存为就行了,无水印盗图完成,大功告成,击掌欢呼~

©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页

打赏作者

正义的龍7

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值