本帖最后由 kosuo 于 2021-7-2 21:02 编辑
注：DCloud是禁止使用阿里云空间搭建图床类业务的，所以这个搭起来大家自用就ok了，不用泛滥，到时候大家都没得用
这个存图片的好处在于图片实际存在阿里云的oss，同时带cdn，所以他是支持阿里云oss的图片链接参数处理的，这就很nice了，图片处理文档如下
- https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.741.21374981derH8a
实现的效果预览
开始搭建
第一步：准备一个已经实名过的Dcloud帐号，并安装HBuilderX编辑器
如果没有Dcloud实名帐号或者不想用自己身份实名的，可以去下面的地址直接买一个成品
- https://www.fengchuicao.com/links/9B176D1B
第二步：下载源码并解压
源码下载地址：- 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度
- https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/rotate,90
|
[复制链接]
发表于 2021-7-2 20:44:20
QQ好友和群
QQ空间
收藏
楼主