在开发后台上传图片的功能时候使用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. Codeforces Round #369 (Div. 2) 套题

    A:模拟水题不说 #include <iostream> #include <string.h> #include <algorithm> #include < ...

  2. 训练深度学习网络时候,出现Nan是什么原因,怎么才能避免?——我自己是因为data有nan的坏数据,clear下解决

    from:https://www.zhihu.com/question/49346370   Harick     梯度爆炸了吧. 我的解决办法一般以下几条:1.数据归一化(减均值,除方差,或者加入n ...

  3. missing required source folder

    Eclipse 中XXX is missing required source folder 问题的解决 https://blog.csdn.net/itzhangdaopin/article/det ...

  4. poj2154 Color ——Polya定理

    题目:http://poj.org/problem?id=2154 今天学了个高端的东西,Polya定理... 此题就是模板,然而还是写了好久好久... 具体看这个博客吧:https://blog.c ...

  5. Java应用程序中的声音播放

    声音可以创造意境,触发遐想,当与虚拟图像相结合时,更加可以让整个世界充满幻觉,声音是多媒体技术的基础. 播放声音是Java对多媒体的支持一个重要部分,它支持的声音文件类型主要有: AU - (扩展名为 ...

  6. 【171】IDL读取HDF文件

    ;+ ;:Description: ; Describe the procedure. ; ; Author: DYQ 2009-7-19; ; ;- PRO TEST_READHDF COMPILE ...

  7. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  8. 栗染-github中搭建博客遇到的问题之一

    运行命令:git push -u origin master To https://github.com/xuzhezhaozhao/Practice.git ! [rejected] master ...

  9. 1617: [Usaco2008 Mar]River Crossing渡河问题(dp)

    1617: [Usaco2008 Mar]River Crossing渡河问题 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1219  Solved:  ...

  10. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(1)App Store 图标、App 预览和屏幕快照概述

    您可以为您的 App Store 产品页提供有关您 App 的 App Store 图标.三个 App 预览和十张屏幕快照. App Store 图标 您必须提供一个 App Store 图标,用于在 ...