在开发后台上传图片的功能时候使用base64预览图片,结果在传入大量图片后导致chrome崩溃,代码如下

                var img = new Image();
var render = new FileReader();
render.onload = function(e) {
img.src = e.target.result;
};
render.readAsDataURL(file);

本人猜测是在图片数量太多而且图片太大,浏览器在解析base64文件的时候消耗了太多资源导致崩溃,所以更换图片预览方式如下:

                var img = new Image();
var render = new FileReader();
render.onload = function(e) {
var blob = new Blob([e.target.result]);
img.src = (URL || webkitURL).createObjectURL(blob);
};
render.readAsArrayBuffer(file);

不再使用base64,改成读取文件二进制,然后通过 createObjectURL 生成资源链接,这就省去了base64解析的过程。

有更好的方法欢迎拍砖。

关于图片预览使用base64在chrome上的性能问题解决方法的更多相关文章

  1. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  2. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  3. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  4. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  6. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  7. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  8. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  9. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

随机推荐

  1. JFreeChart生成饼形图(3)11 (转自 JSP开发技术大全)

    FreeChart生成饼形图(3) (转自 JSP开发技术大全) 14.3 利用JFreeChart生成饼形图 通过JFreeChart插件,即可以生成普通效果的饼形图,也可以生成3D效果的饼形图:如 ...

  2. [原创]桓泽学音频编解码(13):AC3 位分配模块算法分析

    [原创]桓泽学音频编解码(1):MPEG1 MP3 系统算法分析 [原创]桓泽学音频编解码(2):AC3/Dolby Digital 系统算法分析 [原创]桓泽学音频编解码(3):AAC 系统算法分析 ...

  3. nginx开发(一) 源码-编译

    1:获取源码 http://nginx.org/download/nginx-1.8.0.tar.gz 2:编译 解压之后,进入根目录,执行 ./configuer.sh make make inst ...

  4. EasyUI Validatebox 验证框

    转自:http://www.jeasyui.net/plugins/167.html 通过 $.fn.validatebox.defaults 重写默认的 defaults. 验证框(validate ...

  5. 4. extjs中form中的frame:true表示什么

    转自:https://blog.csdn.net/qiu512300471/article/details/23737217 设置为true时可以为panel添加背景色.圆角边框等,如下图 下面的是f ...

  6. Tomcat优化和JVM分析工具

    Tomcat的常见优化和JVM常见分析工具 Tomcat的常用优化配置 (1) 内存空间: /etc/sysconfig/tomcat JAVA_OPTS="-server -Xms32g ...

  7. 【转载】Java - Wait & Notify

    [本文转自]http://www.cnblogs.com/dolphin0520/p/3920385.html 这三个方法的文字描述可以知道以下几点信息: 1)wait().notify()和noti ...

  8. bzoj 1774: [Usaco2009 Dec]Toll 过路费【排序+Floyd】

    非常迷的一道题啊 我觉得挺对的版本只得了30 总之就是Floyd·改,开两个数组,一个是d[i][j]就是普通的只有边权的最短路,a[i][j]是题目要求的那种 具体改的地方是把枚举中转点的地方把中转 ...

  9. Vue学习-Element框架

    今天学了一个基于Vue2.0的桌面端组件库Element,号称是全世界最流行的Vue UI框架.感觉学会了之后就变身大牛了有木有. 好了,不吹牛皮了. Element官方文档通俗易懂,框架什么的安装引 ...

  10. php使用邮箱发送验证码

    如果看着文字眼乏就去看看视频吧-> 如何注册腾讯企业邮箱 https://www.bilibili.com/video/av14351397/ 如何在项目中使用 https://www.bili ...