利用DCloud免费部署自己的图片存储站的图文教程及实现的效果预览

1264 人阅读 | 时间：2021年07月03日 14:48

阿里云服务器	腾讯云服务器	VPS2EZ：老牌低调VPS	ZJI：香港日本美国独服
LOCVPS服务周到	HostKvm低调KVM VPS	傲游主机：优质VPS	80VPS：老牌VPS主机
搬瓦工：CN2 GIA线路	CloudCone：性价比高	JustMySocks科学上网	RackNerd：超级便宜
JustMySocks科学上网	好用的宝塔面板	购买搬瓦工VPS	恒创：香港CN2服务器

注：DCloud是禁止使用阿里云空间搭建图床类业务的，所以这个搭起来大家自用就ok了，不用泛滥，到时候大家都没得用。

这个存图片的好处在于图片实际存在阿里云的oss，同时带cdn，所以他是支持阿里云oss的图片链接参数处理的，这就很nice了，图片处理文档如下

https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.741.21374981derH8a

实现的效果预览



开始搭建

此处为隐藏内容，请评论后查看隐藏内容，谢谢！

第二步：下载源码并解压

源码下载地址：

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/75cf2966-4845-4158-8e93-3b6f2216bdbc.rar

第三步：打开HBuilderX编辑器

选择工具，插件安装，安装如下图所示的插件

然后点击前往插件市场，安装sass和less插件

第四步：导入项目

选择文件，导入，从本地目录导入

导入完成后，在uniCloud文件夹上右击，选择关联云空间或项目

然后点击新建，这里会跳转到unicloud的web控制台，输入一个合适的名字，点击创建

创建好后点击前端网页托管，点击开通,到这里你可以绑定自己的域名，也可以直接用默认域名



点击跨域配置，输入你刚刚绑定的自己域名或者默认域名

然后返回HBuilderX编辑器，点击刷新按钮，选中你刚刚创建的云服务空间，点击关联

关联好后点击manifest.json，选择基础配置，点击重新获取appid

然后点击发行，网站-pc,在网站标题设置你的名字，勾选前端网页托管和你刚刚创建好的云空间的名字，点击发行

等待片刻，发行完成后就可以使用了。我是用的默认域名，如下

最终成品

同一张图使用链接参数实现不同效果

原图

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg

限制宽高

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/resize,m_fixed,h_100,w_100

图片加水印

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/watermark,text_SGVsbG8gV29ybGQ

调整对比度

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/contrast,50

转换成png格式并设置渐进现实（不需要懒加载了）

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/format,png/interlace,1

图片旋转90度