持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
1. 前言
平时如果个人编写笔记，博客，一般会使用word或者Markdown格式，如果使用Markdown格式的话，图片都是保存在本地的，如果给别人分享文章，别人电脑上是无法查看图片的，体验非常不好；为了方便文章笔记分享，这篇文章介绍使用阿里云的OSS存储来存放作为 Typora的网络图片存储库（图床）。
之前码云、GitHub这些也可以当做图床，GitHub的仓库访问较慢体验不好，码云官网的公告里规定图片地址禁止外链，目前也行不通。最方便，安全，的就是采用OSS存储，目前七牛云的OSS存储是免费，也就是每个月有免费的容量和流量，但是需要绑定自己的域名，相对操作也不方便，还需要购买域名，备案。最直接的就采用阿里云OSS、或者腾讯云OSS才作为图床，价格很便宜的，8块钱一年，容量40G，每月还有5G的外网流量，也很安全，不担心图片地址出问题，一般每个月做笔记写文章绰绰有余了，下面就介绍整个配置流程。
2. Typora
Typora是一款比较好用、支持实时预览的 Markdown格式文本编辑器（后缀是.MD）。有 OS X、Windows、Linux三个平台的版本。
Markdown格式是用来编写结构化文档的一种纯文本格式，它使我们在双手不离开键盘的情况下，可以对文本进行一定程度的格式排版。 还可以设置图床，也就是网络图片存放地址，支持一键上传本地所有图片到指定的网络存储库。
官网下载地址: www.typora.io/
CSDN下载地址（这个版本是最后一个免费版0.xx）: download.csdn.net/download/xi…
3. 购买阿里云OSS存储
（1）注册阿里云账号并登录阿里云官网，开通OSS存储。
（2）开通后，这里就可以点击控制台了。
（3）购买资源包
（4）选择合适的资源包
资源包也不贵，40GB空间，5年 是40块钱。
（5）关于流量包
每月有5G的免费下行流量，一般文章的图片存储是够用了。
4. 创建存储块
（1）创建Bucket
（2）根据提示填写名称，配置。权限选择公共读。
（3）鼠标点击右上角头像，选择AccessKey管理。
（4）点击开始使用子账号
（5）点击添加权限
选择OSS存储权限即可。
（6）创建AccessKey
点击账号进入页面内部。
创建AccessKey，然后保存好信息。
5. 配置PicGO
（1）打开PicGO，配置阿里云OSS存储的地址信息。
（2）根据提示填写配置信息即可，然后选择默认图床，完成。
（3）上传所有本地图片
6. 演示使用。
下面就用编写一份LCD绘图代码，加上配图测试，编辑器的图床配置。
下面这份代码是用在单片机上，对LCD屏进行绘图编程，完成图形绘制，文字显示
/*
函数功能：显示一个指定大小的汉字
参 数：
x,y :汉字的坐标
font:取模数据
size:字体大小尺寸
*/
void LcdShowFont(u16 x,u16 y,u8 *dzk,u8 size)
{
u8 temp,t,t1;
u16 x0=x;
u8 csize=(size/8+((size%8)?1:0))*(size);//得到字体一个字符对应点阵集所占的字节数
for(t=0;t<csize;t++)
{
temp=dzk[t];
for(t1=0;t1<8;t1++)
{
if(temp&0x80)LcdDrawPoint(x,y,0x0);
else
{
LcdDrawPoint(x,y,0xffff);
}
temp<<=1;
x++;
if((x-x0)==size)
{
x=x0;
y++;
break;
}
}
}
}
/*
函数功能：矩形颜色填充
参 数：(sx,sy),(ex,ey):矩形对角坐标
color:要填充的颜色
*/
void LcdFill(u16 sx,u16 sy,u16 ex,u16 ey,u16 color)
{
u16 i,j;
u16 xlen=0;
xlen=ex-sx+1;
for(i=sy;i<=ey;i++)
{
LcdSetCursor(sx,i); //设置光标位置
LcdWriteRAM_Prepare(); //开始写入GRAM
for(j=0;j<xlen;j++)LcdWriteData(color);
}
}
/*
函数功能：画直线
参 数：x1,y1:起点坐标
x2,y2:终点坐标
*/
void LcdDrawLine(u16 x1, u16 y1, u16 x2, u16 y2,u16 color)
{
u16 t;
int xerr=0,yerr=0,delta_x,delta_y,distance;
int incx,incy,uRow,uCol;
delta_x=x2-x1; //计算坐标增量
delta_y=y2-y1;
uRow=x1;
uCol=y1;
if(delta_x>0)incx=1; //设置单步方向
else if(delta_x==0)incx=0;//垂直线
else {incx=-1;delta_x=-delta_x;}
if(delta_y>0)incy=1;
else if(delta_y==0)incy=0;//水平线
else{incy=-1;delta_y=-delta_y;}
if( delta_x>delta_y)distance=delta_x; //选取基本增量坐标轴
else distance=delta_y;
for(t=0;t<=distance+1;t++ )//画线输出
{
LcdDrawPoint(uRow,uCol,color);//画点
xerr+=delta_x ;
yerr+=delta_y ;
if(xerr>distance)
{
xerr-=distance;
uRow+=incx;
}
if(yerr>distance)
{
yerr-=distance;
uCol+=incy;
}
}
}
/*
函数功能：任意角度画直线
参 数：
w ：线段的长度
len:半径
c :颜色
x,y:坐标
*/
#include <math.h>
void LcdDrawAngleLine(u32 x,u32 y,float du,u32 len,u32 w,u16 c)
{
int i;
int x0,y0;
float k=du*(3.1415926535/180);
for(i=len-w;i<len;i++)
{
x0=cos(k)*i;
y0=sin(k)*i;
LcdDrawPoint(x+x0,y+y0,c);
}
}
/*
函数功能：画矩形
参 数：(x1,y1),(x2,y2):矩形的对角坐标
*/
void LCD_DrawRectangle(u16 x1, u16 y1, u16 x2, u16 y2,u16 color)
{
LcdDrawLine(x1,y1,x2,y1,color);
LcdDrawLine(x1,y1,x1,y2,color);
LcdDrawLine(x1,y2,x2,y2,color);
LcdDrawLine(x2,y1,x2,y2,color);
}
/*
函数功能：在指定位置画一个指定大小的圆
参 数：
(x,y):中心点
r :半径
*/
void Draw_Circle(u16 x0,u16 y0,u8 r,u16 color)
{
int a,b;
int di;
a=0;b=r;
di=3-(r<<1); //判断下个点位置的标志
while(a<=b)
{
LcdDrawPoint(x0+a,y0-b,color); //5
LcdDrawPoint(x0+b,y0-a,color); //0
LcdDrawPoint(x0+b,y0+a,color); //4
LcdDrawPoint(x0+a,y0+b,color); //6
LcdDrawPoint(x0-a,y0+b,color); //1
LcdDrawPoint(x0-b,y0+a,color);
LcdDrawPoint(x0-a,y0-b,color); //2
LcdDrawPoint(x0-b,y0-a,color); //7
a++;
if(di<0)di +=4*a+6; //Bresenham画圆算法
else
{
di+=10+4*(a-b);
b--;
}
}
}
/*
函数功能：显示图片
参 数：(图片起始横坐标，图片起始纵坐标，图片横像素，图片纵像素，要显示的图片首地址)
*/
void LcdShowPicture(u32 x,u32 y,u32 x1,u32 x2,const unsigned char * p)
{
u32 x0,y0;
for(y0=0;y0<x2;y0++)
{
for(x0=0;x0<x1;x0++)
{
LcdDrawPoint(x+x0,y+y0,(*p<<8)+*(p+1)); //图片取模方式-->高位在前
//画点LCD的像素是16位的，所以需要将2个8位像素合成16位像素。
p+=2;
}
}
}
