注: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
热议
推荐楼 onji 5小时前
推荐楼 御坂 昨天23:02
加权限,不然明天取消免费额度!coding的文件网盘就是最好的例子
2楼 Utime 昨天20:49
3楼 本人马保国 昨天20:49
好东西 学习下
4楼 白嫖怪 昨天20:51
好
马上撸爆
5楼 seeseexiyou 昨天20:54
能整合wp就完美了
6楼 kosuo 昨天20:54
好
马上撸爆
自己偷摸摸用哈
7楼 hanshe 昨天20:54
支持 顶
8楼 ids 昨天21:13
搞个Demo瞧瞧
9楼 ziyounb 昨天21:27
帖子加个权限
10楼 冷心 昨天21:35
支持技术贴
12楼 towser 昨天21:53
说封就封。你们怎么这么多图片要存
13楼 MoeWang 昨天21:56
感觉会黄
14楼 御坂 昨天23:02
加权限,不然明天取消免费额度!coding的文件网盘就是最好的例子
15楼 micms 昨天23:09
mark大佬
16楼 Bass 7小时前
今天又学到一点东西。
17楼 ludashi 6小时前
mark
18楼 本人马保国 6小时前
manifest.json
H5节点里加上
"optimization": {
"treeShaking": {
"enable": true
}
},
可以压缩下JS大小
19楼 onji 5小时前
感觉很快会凉
20楼 爱偏离轨道 5小时前
大佬6666
22楼 onji 5小时前
23楼 liumer 5小时前
mkmk
24楼 本人马保国 5小时前
前期免费,后期收费,搬家搬到手累
先**着在说
25楼 Rece 半小时前
老白牛逼
26楼 zjonetop 半小时前
为什么用自己的域名无法访问
可以访问了
27楼 时过境迁 半小时前
cy
28楼 Rece 半小时前
干就完了
29楼 kosuo 半小时前
可以访问了
刚刚是解析没生效?发出来看看?
30楼 Clever 21分钟前
刚刚是解析没生效?发出来看看?
用它分配的那个域名作为跨域的域名部署了 提示跨域问题诶过了一会 正常了
申明:本文内容由网友收集分享,仅供学习参考使用。如文中内容侵犯到您的利益,请在文章下方留言,本站会第一时间进行处理。