关于图片预览使用base64在chrome上的性能问题解决方法
在开发后台上传图片的功能时候使用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上的性能问题解决方法的更多相关文章
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- 【Js应用实例】图片预览
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...
- 本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
随机推荐
- oracle数据库的导入 导出实例
oracle数据库的导入 导出实例 分类: DataBase2011-09-07 23:25 377人阅读 评论(0) 收藏 举报 数据库oraclefileusercmdservice 我要从另外一 ...
- dubbo和SpringCould
作为常用的微服务框架,这两者经常会被对比,但实际上两者有不少差异. dubbo好比组装电脑,很多东西可以自己选配,自由度高但对于小白难入门,很可能因为某个组件没选好,导致完全用不起来. SpringC ...
- linux shell 实例1
UI项目删除“UIL”文件中的无用字串: 脚本需要制定UIL文件目录位置&无用字串的txt文件,如删除海尔目录下的无用字串: ./delete_uil_string.sh ./haier/UI ...
- 使用Google的Closure Compiler,在本机上压缩javascript
2011-12-05 13:47:39 1.JAVA JDK下载地址: http://download.oracle.com/otn-pub/java/jdk/7u1-b08/jdk-7u1-wi ...
- 插入CSS的方法
传送门 选择器 selector {declaration1; declaration2; ... declarationN } 例: p { text-aligh:center; } ...
- bzoj 2763: [JLOI2011]飞行路线【分层图+spfa】
为什么早年的题总是从0开始标号啊--又zz了一次WA 分层图的题只有这一个套路吧,建分层图,然后优化时间是分层跑spfa然后层与层之间单独跑即可 #include<iostream> #i ...
- bzoj 2726: [SDOI2012]任务安排【cdq+斜率优化】
cdq复健.jpg 首先列个n方递推,设sf是f的前缀和,st是t的前缀和: \[ f[i]=min(f[j]+s*(sf[n]-sf[j])+st[i]*(sf[i]-sf[j])) \] 然后移项 ...
- bzoj 4297: [PA2015]Rozstaw szyn【瞎搞】
从叶子往上先拓扑一下,建立虚拟root,从root开始dfs.注意到每个点的最优取值一定是一个区间(中位数区间),从儿子区间推出父亲区间即可 #include<iostream> #inc ...
- Android 性能优化(19)*代码优化11条技巧:Performance Tips
Performance Tips 1.In this document Avoid Creating Unnecessary Objects 避免多余的对象 Prefer Static Over Vi ...
- 转 mysql 5.7版本修改编码为utf-8
刚开始学习MySQL,下载的是官网最新版本 5..7.14,使用cmd输入中文时报错,于是开始修改mysql默认编码(windows下) 首先通过 show variables like 'chara ...