最新要闻
- 连上半个月夜班 27岁小伙一觉醒来懵了:脸肿得像包子
- 环球今亮点!微信新增“视频号”入口?腾讯张军否认网传截图:假的
- OpenAI CEO承认害怕ChatGPT:AI会取代许多工作
- 环球快看:车主花32万买到全损事故车:获退1赔3、到手97.2万
- 群晖DS423入门级四盘位NAS发布:居然支持Docker了
- 今头条!小米真无线降噪耳机3《星球大战》联名版来了!明早10点正式公布
- 每日观察!家长发又有作业了被老师踢出群聊 还被电话教育:网友纷纷感同身受
- 当前报道:男子吐槽22元吃面 面量仅盖住碗底 店方:这是网红大碗
- 当前动态:一定的提问方法与一定的什么是控制访谈的两个重要因素_一定的与一定的是控制访谈的两个重要因素
- 2023年安卓之光!小米13 Ultra最新进展:还在打磨MIUI 14系统
- 焦点滚动:AMD Zen4低功耗锐龙7 7840U首次现身:28W就灭掉45W Zen3+
- 世界视点!南航重推“随心飞”产品:不限年龄无限飞行 服务器被挤爆
- 环球热点!推荐机制不再保密:马斯克宣布月底开放Twitter推荐算法
- P图侮辱女性 苏州大学凌晨通报:开除赵某某学籍
- 1254MB海量缓存+96核心!AMD霄龙9004X让对手彻底绝望
- 【全球聚看点】“密集恐惧症”真的是种病?看完也许会治好
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
前端加载超大图片(100M以上)实现秒开解决方案
前言
前端加载超大图片时,一般可以采取以下措施实现加速:
图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间。压缩图片时需要注意保持图片质量,以免影响图片显示效果。
(资料图片仅供参考)
图片分割:将超大图片分割成多个小图块进行加载,可以避免一次性加载整个图片,从而加快加载速度。这种方式需要在前端实现图片拼接,需要确保拼接后的图片无缝衔接。
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) } }
应用案例
应用一 对图像进行拼接前端查看
原始图片为
最终效果为:
体验地址: https://vjmap.com/app/cloud/#/map/t3c93d14ff09?version=v1&mapopenway=GeomRender&vector=false
应用二 对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图进行叠加校准。效果如下
体验地址: https://vjmap.com/demo/#/demo/map/comprehensive/04imagecadmap
关键词:
-
快讯:数据结构-图
1 图的概念基础概念顶点集合(vex-set):如上图S(vex)={& 39;A& 39;,& 39;B& 39;,& 39;C& 39;,& 39;D& 39;,& 39;E&
来源: 快报:刷题疑惑2
前端加载超大图片(100M以上)实现秒开解决方案
快讯:数据结构-图
连上半个月夜班 27岁小伙一觉醒来懵了:脸肿得像包子
环球今亮点!微信新增“视频号”入口?腾讯张军否认网传截图:假的
数据挖掘第四周作业
conda环境下使用nvcc -V报错nvcc: command not found的一种解决方法
环球快资讯:【论文笔记】SegNet
OpenAI CEO承认害怕ChatGPT:AI会取代许多工作
前端设计模式——原型模式
全球短讯!69.处理类型
环球快看:车主花32万买到全损事故车:获退1赔3、到手97.2万
群晖DS423入门级四盘位NAS发布:居然支持Docker了
今头条!小米真无线降噪耳机3《星球大战》联名版来了!明早10点正式公布
每日观察!家长发又有作业了被老师踢出群聊 还被电话教育:网友纷纷感同身受
当前报道:男子吐槽22元吃面 面量仅盖住碗底 店方:这是网红大碗
当前动态:一定的提问方法与一定的什么是控制访谈的两个重要因素_一定的与一定的是控制访谈的两个重要因素
环球看热讯:MySQL如何正确查询字符串长度
每日速看!C. Sequence Master
2023年安卓之光!小米13 Ultra最新进展:还在打磨MIUI 14系统
焦点滚动:AMD Zen4低功耗锐龙7 7840U首次现身:28W就灭掉45W Zen3+
世界视点!南航重推“随心飞”产品:不限年龄无限飞行 服务器被挤爆
全球微资讯!看看这份2023年MySQL终级面试题,提升你的内力,给你面试助力
环球热点!推荐机制不再保密:马斯克宣布月底开放Twitter推荐算法
P图侮辱女性 苏州大学凌晨通报:开除赵某某学籍
.NET中的winform、wpf、winui和maui你都知道吗?
1254MB海量缓存+96核心!AMD霄龙9004X让对手彻底绝望
【全球聚看点】“密集恐惧症”真的是种病?看完也许会治好
每日快报!群晖DSM 7.2 Beta发布:Docker更名 相册大升级
焦点快播:诸葛亮的改动再度提上日程,诸葛亮真的需要这样调整吗?
今日热闻!独特的散热设计与人机交互触控屏!微星海皇戟X2主机评测:顶级游戏性能
【全球快播报】《你的名字。》导演新海诚新作!《铃芽之旅》预售票房突破3000万
天天微动态丨C++ | 运算符重载
每日快播:BUUCTF-MISC-面具下的flag(vmdk的解压和Brainfuck与Ook解密)
天天微动态丨比亚迪智能手表亮相:一键控车 可完美替代车钥匙
买了电动牙刷 没想到越用牙越废
观天下!宝马X3变X6!男子买二手宝马X3买到全损事故车 退1赔3得97万
印度机长飞行中吃早餐 咖啡直接放在油门把手上!双双被罚
看New Bing回答世纪难题:女友和妈妈掉水里先救谁
24层楼高!首艘国产大型邮轮预计年底交付:零件数是复兴号高铁13倍
环球热点评!xj威客网可信不_xj威客网
全球热点评!暴雪火速排查《暗黑4》排队问题
天天讯息:别等降价了!长城坦克推全年保价政策 年底前官降返差价
全球快资讯丨《名侦探柯南》里出现九转大肠厨师和评委:网友直呼瞬间出戏
环球简讯:知名车评人吐槽宝马漏机油养活他家修理厂 原因直指塑料气门室盖
【世界热闻】探究C# dynamic动态类型本质
天天新资讯:郭帆谈《流浪地球2》“50岁以上出列”拍摄:喊停了外国群演还在哭
全球短讯!给蚊子送上夏天第一拍!雅格电蚊拍大促:10.9元到手
今日要闻!迪士尼正版授权 泰国乳胶凉席三件套大促!原价190 券后90
检查 Linux 系统是运行在虚拟机上还是物理机上
远大前程多少集_远大前程介绍
全球热资讯!《寂静岭2:重制版》美术谈护士穿丝袜:曾被指责皮肤暴露
最尴尬的新造车:称车主可活100岁 碰撞测试得分0
50吨!山东探获一大型金矿床:服务年限可达20年以上
世界视点!读Java性能权威指南(第2版)笔记21_垃圾回收H
优化利器In-Memory开启和效果
全球关注:谈谈 Vue toRef 和 reactive
天天报道:博主带卷尺吃披萨发现尺寸不够:99元12寸披萨直径少2.5厘米
女子称点外卖备注送上楼被骑手教育:四块钱还想让送上楼
三亚骂游客导游被吊销导游证罚款5万:网友点赞 低价团慎重参与
重庆东站一项目招标条件被指“量身定做”:招标人答疑,公管局正处理投诉
mysql 索引(InnoDB)
环球关注:快速带你入门css
世界热门:Git常用命令总结
环球热门:马龙樊振东会师决赛:国乒包揽大满贯5冠
当前热议!俞敏洪谈野生虾事件:犯了错误 就要去改正
世界最资讯丨情侣称住41层酒店被“玻璃人”看光引热议:网友支持酒店已提示
热文:数据安全始终是一个不可忽视的问题
世界最资讯丨数据结构-绪论
全球讯息:职工医保报销比例2022_职工医保报销比例
全球观点:OpenAI CEO谈GPT4:人类迄今开发的最伟大技术 有点害怕了
即时:曹曦月方否认带货3个月成交278元:拿证据说话
希尔排序、快速排序、KMP算法
环球热推荐:008爬虫之短短20行代码下载周杰伦所有歌曲
一次 Hyperf 注解失效问题分析
全球看热讯:Qt+百度AI文字识别OCR小工具
国内外多名大胃王意外死亡 有人胖到320斤有人开播前突然昏迷:专家科普
热点在线丨2023省选16天
著名的Breach黑客论坛管理员被捕
环球微头条丨男子整形后称没法靠颜值吃饭了:丢了工作
《暗黑4》公测性能实测:RTX 4090显卡流畅跑8K
世界短讯!SSL/TLS协议运行机制的概述
最新资讯:重学c#系列—— explicit、implicit与operator[三十四]
世界要闻:李彦宏谈文心一言:市场反馈符合预期 股价波动没必要解释
焦点滚动:挺能藏啊!男子电动滑板车藏84个SSD入境被海关查获
【天天快播报】webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
CTF show 信息收集篇
Quicker 快速开发,控制脚本关闭(示例,鼠标连点器)
天天微头条丨卡佩罗:那不勒斯和国米将晋级 迈尼昂和奥纳纳是米兰双雄的关键
每日观点:曹姓明星收20万带货3月成交278元 被判退还13.9万:要量力而行
13代酷睿躺赢了 4nm锐龙7000跳票:此前规格被砍2刀
已知球面经纬度求方位角和反方位角(awk一行代码实现)
环球观热点:《流浪地球2》门框机器人科幻十足 设计师详解:还能晾衣服能甩干
东北首条海下/跨海地铁!大连地铁5号线正式运营
世界热讯:Linux学习笔记
报道:插件化架构设计(2):插件化从设计到实践该考量的问题汇总
【天天新要闻】Vins 前端中高效的去畸变的方式解析
动态焦点:暴雪:《暗黑》系列能成功多亏了韩国玩家热情和爱戴
全球观点:朱雀二号遥一运载火箭发射失利:已查明飞行故障 通过归零评审
全球热头条丨《雷霆沙赞2》豆瓣开分6.5:加朵女神加分、剧情被批幼稚低级