在开发后台上传图片的功能时候使用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. sql%found sql%notfound sql%rowcount sql%isopen

    原文引入:http://blog.csdn.net/mh942408056/article/details/6949325 sql%found sql%notfound sql%rowcount sq ...

  2. 【Dairy】2016.10.23 观火&中彩记

    ...................... 就第一条可以! 观火10分钟,长郡附近老房子起火...

  3. asp.net 4.0 尚未在服务商注册 您需要手动将web服务器配置为 ASP.NET4.0,这样您的网站才能正常进行。

    VS2010打开项目出现的此问题 电脑先安装VS2010 然后安装VS2010 SP1补丁.然后安装VS2015 后来又安装了Framework4.6.1 用网上搜索到的平常方法无法解决此问题. 最后 ...

  4. P4971 断罪者

    传送门 首先,不难看出可以给每个集合开一个可并堆,然后乱搞就可以了 主要的问题就是将罪恶值清零和减少罪恶值该怎么搞 罪恶值清零可以直接找到这个节点然后把值变为零,再把它的左右儿子分别并到这个节点所在的 ...

  5. 【weiphp】安装中报错

    问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...

  6. 使用nginx和tomcat配置反向代理和动静分离

    背景 本人主修的编程语言是Java语言,因此最开始接触的Web开发也是JSP技术.使用Java开发的Web应用需要部署在专门的服务器程序上运行,比如Tomcat.但是一般很少会有人将Tomcat作为用 ...

  7. C基础-对malloc的使用与理解

    一.malloc函数分析 1.函数原型 void * malloc(size_t  size); 2.Function(功能) Allocates a block of size bytes of m ...

  8. Uva 796 Critical Links (割边+排序)

    题目链接: Uva 796 Critical Links 题目描述: 题目中给出一个有可能不连通的无向图,求出这个图的桥,并且把桥按照起点升序输出(还有啊,还有啊,每个桥的起点要比终点靠前啊),这个题 ...

  9. 洛谷 P3437 [POI2006]TET-Tetris 3D

    二维线段树区间更新啊 树套树的外层树,如果是线段树的话一般似乎不能打标记?(毕竟标记不好下传) 然而起码对于这题是可以的...对于外层线段树,每个节点放两个内层线段树dat和setv,分别是得到的值和 ...

  10. Python(1)-第一天

    PTVS下载地址:https://pytools.codeplex.com/releases/view/109707 Python下载地址:https://www.python.org/downloa ...