在开发后台上传图片的功能时候使用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. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  2. android 添加手机短信,获取手机短信,删除手机短信和修改手机短信

    注意添加权限: <uses-permission android:name="android.permission.READ_SMS"></uses-permis ...

  3. 3-1 todolist功能开发

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. IIs+php 最精简的环境配置

    一,安装IIS 1,打开控制面板->程序和功能->打开或关闭windows功能->Internet 信息服务 1>选 中web管理工具 2>选 中万维网服务 1>应 ...

  5. MySQL权限及登陆、退出方法

    用户权限列表 SELECT 查询权限 INSERT 插入权限 UPDATE 更新权限 DELETE 删除权限(用于删除数据) CREATE 创建权限 DROP 删除权限(用户删除文件) RELOAD ...

  6. E20180113-hm

    round robin algorithm  轮询调度算法 circular  adj. 圆形的; 环行的; 迂回的,绕行的; 供传阅的,流通的;

  7. vue用户登录状态判断

    之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案; 先说基本要求: 项目中的登录状态是依据服务器里的状态来作为判断依据; 每一个需要登录后才能操作的接口 ...

  8. eccharts-gl 3D立体柱状图

    echarts-gl继承于echarts echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe 代码 ...

  9. JAVAEE 是什么,如何获取各种规范jar包及各种规范的jar包源码

    1.什么是JAVA EE JAVA EE是由一系列规范组成的,规范是由JCP制定的,并且提供了参考实现.规范(Specification)是一系列接口,不包含具体实现 有以下常见的JAVA EE实现, ...

  10. [转]微信开发.Net 接入示例

    本文转自:http://my.oschina.net/lcak/blog/219618 微信公众平台接口开发官方仅提供了 PHP 接入示例代码, 网上找到的.Net代码多半需要积分下载, 所以自己写了 ...