首页
题库
公司真题
专项练习
面试题库
在线编程
面试
面试经验
AI 模拟面试
简历
求职
学习
课程
专栏·文章
竞赛
搜索
我要招人
发布职位
发布职位、邀约牛人
更多企业解决方案
在线笔面试、雇主品牌宣传
登录
/
注册
the_sky_world
前端工程师
发布于四川
关注
已关注
取消关注
@程序员白特:
前端加载超大图片(100M以上)实现秒开解决方案
公众号:程序员白特,欢迎一起交流学习~来源:vjmap,https://juejin.cn/post/7212270321622106170前言前端加载超大图片时,一般可以采取以下措施实现加速:图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间。压缩图片时需要注意保持图片质量,以免影响图片显示效果。图片分割:将超大图片分割成多个小图块进行加载,可以避免一次性加载整个图片,从而加快加载速度。这种方式需要在前端实现图片拼接,需要确保拼接后的图片无缝衔接。CDN 加速:使用 CDN(内容分发网络)可以将图片缓存在离用户更近的节点上,从而加速图片加载速度。如果需要加载的图片是静态资源,可以将其存储在 CDN 上,以便快速访问。懒加载:懒加载是一种图片延迟加载的方式,即当用户浏览到需要加载的图片时才进行加载,可以有效避免一次性加载大量图片而导致页面加载速度缓慢。WebP 格式:使用 WebP 格式可以将图片大小减小到 JPEG 和 PNG 的一半以下,从而加快图片加载速度。HTTP/2:使用 HTTP/2 协议可以并行加载多个图片,从而加快页面加载速度。预加载:预加载是在页面加载完毕后,提前加载下一步所需要的资源。在图片加载方面,可以在页面加载完毕后提前加载下一个需要显示的图片,以便用户快速浏览。而对于几百M或上G的大图而言,不管对图片进行怎么优化或加速处理,要实现秒开也是不太可能的事情。而上面介绍的第二条“图像分割切片”是最佳解决方案。下面介绍下如何对大图进行分割,在前端进行拼接实现秒开。图像切片原理介绍图像切片是指将一张大图分割成若干个小图的过程,以便于存储和处理。图像切片常用于网络地图、瓦片地图、图像拼接等应用中。切片原理主要包括以下几个步骤:定义切片大小:首先需要定义每个小图的大小,一般情况下是正方形或矩形。计算切片数量:根据定义的切片大小,计算原始图像需要被切成多少个小图。计算公式为:切片数量 = 原始图像宽度 / 切片宽度 × 原始图像高度 / 切片高度。切割图像:按照计算出的切片数量,将原始图像分割成相应数量的小图。可以使用图像处理库或自己编写代码实现。存储切片:将切割后的小图存储到磁盘上,可以使用常见的图片格式,如JPEG、PNG等。加载切片:在需要显示切片的地方,根据需要加载相应的小图,组合成完整的图像。使用图像切片可以降低处理大图像的复杂度,同时也能够提高图像的加载速度,使得用户可以更快地查看图像的细节。图像切片广泛应用于需要处理大图像的场景,能够提高图像处理和显示效率,同时也能够提高用户的体验。实现先上效果图上传打开图形先上传大图,至后台进行切片处理, 上传相关代码为:async onChangeFile(file) { try { message.info('文件上传中,请稍候...') this.isSelectFile = false; this.uploadMapResult = await svc.uploadMap(file.raw); if (this.uploadMapResult.error) { message.error('上传图形失败!' + this.uploadMapResult.error) return } this.form.mapid = this.uploadMapResult.mapid; this.form.uploadname = this.uploadMapResult.uploadname; this.maptype = this.uploadMapResult.maptype || ''; this.dialogVisible = true; } catch (error) { console.error(error); message.error('上传图形失败!', error) }}如果需要上传后对图像进行处理,可以新建一个cmd.txt文件,把处理的命令写进文件中,然后和图像一起打包成zip上传。如需要把1.jpg,2.jpg拼接成一个新的图片m1.png再打开,cmd.txt的写法如下:join1.jpg2.jpgm1.pnghorizontal再把1.jpg,2.jpg,cmd.txt三个文件打包成zip文件上传即可打开图像相关代码async onOpenMap() { try { let mapid = this.form.mapid; let param = { ...this.uploadMapResult, // 图名称 mapid: this.form.mapid, // 上传完返回的fileid fileid: this.uploadMapResult.fileid, // 上传完返回的文件名 uploadname: this.form.uploadname, // 地图打开方式 mapopenway: this.form.openway === "直接打开图形" ? vjmap.MapOpenWay.Memory : vjmap.MapOpenWay.GeomRender, // 如果要密码访问的话,设置秘钥值 secretKey: this.form.isPasswordProtection ? svc.pwdToSecretKey(this.form.password) : undefined, style: vjmap.openMapDarkStyle(),// div为深色背景颜色时,这里也传深色背景样式 // 图像类型设置地图左上角坐标和分辨率 imageLeft: this.form.imageLeft ? +this.form.imageLeft : undefined, imageTop: this.form.imageTop ? +this.form.imageTop : undefined, imageResolution: this.form.imageResolution ? +this.form.imageResolution : undefined, } let isVectorStyle = this.form.openway === "存储后渲染矢量"; await openMap(param, isVectorStyle); } catch (error) { console.error(error); message.error('打开图形失败!', error) }}应用案例应用一 对图像进行拼接前端查看原始图片为最终效果为:体验地址: vjmap.com/app/cloud/#…应用二 对tiff影像进行切片并与CAD图叠加校准对tiff影像上传时可设置地理坐标范围。tiff/tfw, jpg/jpgw坐标文件的格式(6个参数) 0.030000 0.0000000000 0.0000000000 -0.030000 451510.875000 3358045.000000以上每行对应的含义:1 地图单元中的一个象素在X方向上的X分辨率尺度。 2 平移量。 3 旋转量。 4 地图单元中的一个象素在Y方向上的Y分辨率尺度的负值。 5 象素1,1(左上方)的X地坐标。 6 象素1,1(左上方)的Y地坐标。在上传图时需要根据文件中的第一个,第五个和第六个值设置地图范围或者上传完后,操作菜单中点击设置地图范围进行设置影像地图切片完成后,可与CAD图进行叠加校准。效果如下体验地址: vjmap.com/demo/#/demo…
点赞 5
评论 0
全部评论
推荐
最新
楼层
滴滴
校招火热招聘中
官网直投
相关推荐
根号五
05-15 21:59
重庆邮电大学 计算机类
腾讯天美(?)暑期实习电话面凉经
猝不及防的一场电话面。头一天打电话约我面试没听清是腾讯哪个部门的,知道面试才知道是做王者荣耀的,当场吓软了,不是我谁啊我配投天美?😨先自我介绍和项目巴拉巴拉。上来一句c#的“词语引用”给整蒙了,可能听错了,反正没反应过来就过了。后面的总结一下大概有这些:语言特性• 装箱与拆箱• 反射机制• 虚拟机原理• Java与C++的交互• Java虚拟机类加载• C++:虚函数表new与malloc算法• 快速排序与归并排序• A*算法与Dijkstra算法• 动态规划操作系统• 内存管理• 进程间通信数据结构• 数组与链表• ...
点赞
评论
收藏
转发
不愿再收感谢信的大魔王很神奇
05-13 19:42
厦门大学 计算机类
offer选择
携程听说部门不太好,毁offer是直接和hr说就行吗,有什么严重后果吗?要不要等蚂蚁还是直接接了?求大佬解答引流腾讯 美团 阿里 拼多多 华为 字节
投递蚂蚁集团等公司10个岗位 >
软件开发薪资爆料
通信硬件薪资爆料
点赞
评论
收藏
转发
牛客510952620号
04-16 22:40
美团_测开(实习员工)
第一个大厂offer
美团,你是我爹
投递美团等公司10个岗位
点赞
评论
收藏
转发
随便找个班混日子
05-09 00:54
已编辑
前端工程师
唉,时代变了
#前端开发#前端#
点赞
评论
收藏
转发
石榴不愿再收感谢信
05-14 18:20
华东理工大学 金融学类
中国银行面经分享
攒攒人品,记录一下问题:1. 自我介绍——2. 对银行业务的了解——3.职业规划是怎样的?——4.如何应对工作中的挑战和变化?——5.结合专业你认为自己的优势是什么?——6.对当前金融市场和行业发展的了解。——7.为什么选择中国银行?
金融银行面经
点赞
评论
收藏
转发
点赞
收藏
评论
分享
回复帖子
全站热榜
1
...
盲审已过,答辩已过,工作已签
3.1W
2
...
聪明人看的Java后端入门路线(应该比大多数高手给的靠谱)
1.1W
3
...
【有奖活动】浅聊一下我的实习⭐
9879
4
...
没offer的我们也很优秀偶
8795
5
...
快手客户端开发工程师(1)
7730
6
...
pcg qq 一面
6761
7
...
双非本 腾讯WXG暑期已offer | 附面经
4533
8
...
数据库慢查询优化的一个回答
4379
9
...
深夜emo了,暑假实习还是0offer
3915
10
...
今天滴滴会开奖吗
3792
正在热议
#
牛客帮帮团来啦!有问必答
#
788285次浏览
12508人参与
#
机械制造薪资爆料
#
315521次浏览
3659人参与
#
晒一晒我的offer
#
3428704次浏览
54887人参与
#
想实习转正,又想准备秋招,我该怎么办
#
114784次浏览
1288人参与
#
如果校招重来我最想改变的是
#
88497次浏览
1537人参与
#
海康威视求职进展汇总
#
98824次浏览
1190人参与
#
国企vs私企,你更想去?
#
19465次浏览
197人参与
#
0offer是寒冬太冷还是我太菜
#
422757次浏览
4882人参与
#
通信硬件2024笔试面试经验
#
86636次浏览
942人参与
#
投了多少份简历才上岸
#
59536次浏览
968人参与
#
提前批过来人的忠告
#
21500次浏览
441人参与
#
荣耀求职进展汇总
#
68442次浏览
683人参与
#
投递实习岗位前的准备
#
622159次浏览
11085人参与
#
实习生如何通过转正
#
26589次浏览
355人参与
#
简历无回复,你会继续海投还是优化再投?
#
22530次浏览
316人参与
#
你的工作大概什么时候入职?
#
4585次浏览
55人参与
#
工作压力大怎么缓解
#
10655次浏览
151人参与
#
学历对求职的影响
#
139606次浏览
1595人参与
#
软件开发投递记录
#
476403次浏览
7218人参与
#
毕业租房也有小确幸
#
26857次浏览
1482人参与
牛客网
牛客企业服务