base编码图片导致浏览器卡顿页面加载特别慢怎么办

我们都知道浏览器本身支持直接显示base64编码的图片的例如


<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD......" width="554" height="402"  />

但是通过项目中发现前台浏览器处理这种base编码的图片,如果图片数量很多,单个图片接近1MB的话浏览器会变得非常卡顿页面加载特别慢
所以我改成后台解析base64编码的图片还原成图片临时存储在服务器中, 直接返回前台图片地址这样一来,像以前一样,带链接地址的图片会异步加载不会导致页面白屏
话不多说贴代码

/*** base64编码图片转图片存储并返回访问路径* @param request* @param model* @throws IOException*/private void settingImageUrl(HttpServletRequest request, Model t) throws IOException{String img = t.getImg();if (StringUtil.isEmpty(img)){return;}// “data:image/jpeg;base64,”之后的字符串才是图片，所以一定要去掉这个前缀。img = img.replace("<img src=\"", "");img = img.substring(0, img.indexOf("\""));String[] split = img.split(",");if (split.length != 2){return;}img = split[1];byte[] bs = ImageUtil.GenerateImage(img);// 项目在容器中实际发布运行的根路径String realPath = request.getSession().getServletContext().getRealPath("/") + "temp";// 自定义的文件名称String trueFileName = String.valueOf(System.currentTimeMillis()) + ".png";// 设置存放图片文件的路径realPath = realPath + File.separator + trueFileName;System.out.println("存放图片文件的路径:" + realPath);// 转存文件到指定的路径FileUtil.createFile(realPath, bs);String imgUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/" + "temp" + "/" + trueFileName;t.setImg(imgUrl);System.out.println("图片文件的访问地址:" + imgUrl);}

这样一来图片是存储在项目根目录下的temp文件夹下的但是这样一来图片如果太多会不会占用服务器所以可以每次访问都对图片进行清空操作

/*** 清空图片缓存*/String realPath = request.getSession().getServletContext().getRealPath("/") + "temp";File file = new File(realPath);if (file.exists()){FileUtil.deleteDir(file);}

代码中图片工具类和文件操作工具类都贴出来如下

/*** 对Base64编码图片解码返回byte字节流* * @param imgStr* @return 字节流*/public static byte[] GenerateImage(String imgStr){if (imgStr == null) // 图像数据为空return null;BASE64Decoder decoder = new BASE64Decoder();try{// Base64解码byte[] bytes = decoder.decodeBuffer(imgStr);for (int i = 0; i < bytes.length; ++i){if (bytes[i] < 0){// 调整异常数据bytes[i] += 256;}}return bytes;}catch (Exception e){return null;}}/*** 在本地地址创建文件* @param filePath 文件 地址* @param by 字节流* @return* @throws IOException*/public static File createFile(String filePath, byte[] by) throws IOException{File prjfile = new File(filePath.replace("\\", "/").replace("//", "/"));if (!prjfile.exists()){File parent = prjfile.getParentFile();if (!parent.exists()){parent.mkdirs();}// 创建新文件prjfile.createNewFile();}BufferedOutputStream out = null;try{//将byte数组写入 文件out = new BufferedOutputStream(new FileOutputStream(prjfile));out.write(by);out.flush();} catch (Exception e){e.printStackTrace();} finally{release(out);}return prjfile;}/*** 递归删除文件夹以及下面所有文件* @param directoryPath* @return*/public static boolean deleteDir(File file){if (file == null){return false;}if (file.isDirectory()){String[] fileNames = file.list();for (String fileName : fileNames){boolean success = FileUtil.deleteDir(new File(file, fileName));if (!success){return false;}}}return file.delete();}

base编码图片导致浏览器卡顿页面加载特别慢怎么办相关推荐

Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
vue Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
vue + Echarts 填坑记（Echarts数据量大，导致浏览器卡顿）
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
优化 cesium 界面广告牌(billboard)数据量大于 10w +时,地图加载缓慢.卡顿.加载完成后浏览器严重卡顿甚至崩溃问题前言: 项目之前的设计,billboard 广告牌是绑在 ent ...
EasyPlayer播放H.265的HLS视频流，ts加载频繁导致浏览器卡顿是什么原因？
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.同时还支持大码率 ...
微信浏览器跳转页面加载loading效果问题
2019独角兽企业重金招聘Python工程师标准>>> 开发一个微网页的项目,先需要跳转银联前加载进度条效果,因后台执行查询非常久,需要展现一个loading效果以下是最开始写的版 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
Echarts 占用CPU高，导致浏览器卡顿问题。
页面中使用了大量的Echarts 图例,当操作页面时间久了后发现浏览器占用电脑CPU达到了30%,而电脑的配置是服务器级别的配置,这让人觉得奇怪. 使用chrome的profile调试工具记录了js脚 ...

base编码图片导致浏览器卡顿页面加载特别慢怎么办

base编码图片导致浏览器卡顿页面加载特别慢怎么办相关推荐

最新文章

热门文章