目录结构

文章快速说明索引

学习目标：

平时我们在写技术博客的时候，上传图片是一件非常有效和常见的事情。至于怎么上传一个动态图，之前也曾经写过博客 ：CSDN博客专用动态图小程序的推荐—ScreentoGIF教程，点击前往 。虽然大家会觉得上传图片嘛 很简单的事情，Ctrl C+V嘛！实际上 考虑到美观和其他的需要，上传图片 以及为图片增加水印也是一门大有门道的学问。

学习内容：

1、Ctrl C+V 贴上去的图片有时候没办法做到 自适应
2、想上传一个没有水印的图片(图片上不要CSDN的默认 链接水印)
3、图片上的水印格式 或者 内容，可不可以自己变一下

学习时间：

2021年02月01日 04:55:57

学习产出：

1、CSDN 技术分享推广博客1篇

背景就是我们上面的这张图片，它就是此次演示的素材！

实例一 ：从网上得到的一张图片，进行上传

---

我们这里假如从网上获取到一张图片，使用Ctrl C+V操作进行上传图片，如下：

如上，我们的这张图片 复制粘贴 操作之后，会发现一个问题：

1、图片太小了，无法做到屏幕自适应

这里想让上图自适应的办法就是利用HTML的标签：

<img alt="" src="https://img-blog.csdnimg.cn/20210201150516316.png#pic_center"  height="100%" width="100%" class="img-responsive">

// 上面动态演示里面的图片链接就是 你这个图片的URL，接下来URL贴到上面src下 即可做到图片的自适应 就像下面那样

// 宽和高 这里设置100% 
// 图片对齐位置：center，可以自行设置为 left 等

实例二 ：使用CSDN，点击图片 进行本地上传

---

我们这里假如 采用上传一个本地的图片，效果如下：

效果如下：水印内容是我的博客链接：https://blog.csdn.net/weixin_43949535/

在 CSDN-Markdown 插入图片是通过自动生成图片URL的形式实现的，上面这个图片的内容(自动生成的图片的URL)为：

// 下面这个URL 是可以去访问的

https://img-blog.csdnimg.cn/20210201152415467.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTUzNQ==,size_16,color_FFFFFF,t_70#pic_center

/****************************************************************/
1. https://img-blog.csdnimg.cn/20210201152415467.jpg
2. x-oss-process=image/watermark
3. type_ZmFuZ3poZW5naGVpdGk
4. shadow_10
5. text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTUzNQ==
6. size_16
7. color_FFFFFF
/****************************************************************/

根据HTTP Get请求的 URL 通常是这样的：https://img-blog.csdnimg.cn/20210201152415467.jpg?... ：

1、?的后面是所要传递的数据，通常以{key,value}键值对的形式出现
2、于是直接访问https://img-blog.csdnimg.cn/20210201152415467.jpg 这个地址，结果就是无水印的

接下来我们就需要搞明白给到图片，附带传递了哪些内容 就是这些K-V对的存在意义（从上面代码块中的 第2点–第7点开始）：

• 上面 2. x-oss-process=image/watermark 存在的意义就是：估计这是 CSDN-Markdown 内部的一个标识，没有这个的话 是表示图片不需要水印的(大家可以自行尝试一下单单去掉这块，图片的水印会消失的)
• 接下来是3. type_ZmFuZ3poZW5naGVpdGk 这个写的是一个type 类型，那么是什么类型呢？这里需要告诉大家的是：在CSDN-Markdown 里面的键值对 value 是经过Base64加密后的。于是我们来看一下 ZmFuZ3poZW5naGVpdGk 是什么：
  
  解密后的value是：fangzhengheiti 就是方正黑体，于是我们就知道了这是水印的字体
• 然后 4. shadow_10 影子 这个value对应透明度，改成100趋于不透明，改成10趋于透明
• 下面这个5. text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTUzNQ==就是图片上水印的字体内容。通常情况下，CSDN会默认其为大家的博客链接，这个aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTUzNQ==经过解密之后，就是我的博客链接。于是乎 我们就可以自行添加想要的内容 例如我想在上图加个 Computer Science and Technology Tsinghua University 其经过Base64加密后的内容是：Q29tcHV0ZXIgU2NpZW5jZSBhbmQgVGVjaG5vbG9neSBUc2luZ2h1YSBVbml2ZXJzaXR5
• 后面两个6. size_16 和 7. color_FFFFFF 就分别代表着字体大小和颜色

好的，那么我们下面就实际演练一个例子：

其完整的URL为：

https://img-blog.csdnimg.cn/20210201152415467.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_30,text_Q29tcHV0ZXIgU2NpZW5jZSBhbmQgVGVjaG5vbG9neSBUc2luZ2h1YSBVbml2ZXJzaXR5,size_16,color_00AEAE,t_40#pic_center

本文中使用的Base64加密 网站是：

1. Base64加密，点击前往
2. BASE64编解码，点击前往(2022-12-16 10:20:11)

注：上面的网站 大家多加测试再用！