关于图片预览使用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 ...
随机推荐
- 第八周 Leetcode 44. Wildcard Matching 水题 (HARD)
Leetcode 44 实现一种类似正则表达式的字符串匹配功能. 复杂度要求不高, 调代码稍微费点劲.. 好像跟贪心也不太沾边, 总之 *把待匹配串分成若干个子串, 每一个子串尽量在模式串中靠前的部分 ...
- EasyUI Tree 树
转自:http://www.jeasyui.net/plugins/185.html 通过 $.fn.tree.defaults 重写默认的 defaults. 树(tree)在网页中以树形结构显示分 ...
- bzoj 1426: 收集邮票【期望dp】
我太菜了,看的hzwer的blog才懂 大概是设f[i]表示已经拥有了i张邮票后期望还要买的邮票数,这个转移比较简单是f[i]=f[i]*(i/n)+f[i+1]*((n-i)/n)+1 然后设g[i ...
- bzoj 1718: [Usaco2006 Jan] Redundant Paths 分离的路径【tarjan】
首先来分析一下,这是一张无向图,要求没有两条路联通的点对个数 有两条路连通,无向图,也就是说,问题转化为不在一个点双连通分量里的点对个数 tarjan即可,和求scc还不太一样-- #include& ...
- Android框架式编程之EasyPermissions
EasyPermission库是一个谷歌官方提供的简化基本的系统权限逻辑的库,可用于在Android M或者更高版本上. 官方项目地址:https://github.com/googlesamples ...
- Linux day01(二)虚拟机快照和克隆的用法介绍
一:快照 优点:运行虚拟机后不用担心系统会被弄崩溃了,点击快照会立即恢复到初始状态 缺点:回滚会带来数据的丢失,所以要考虑数据恢复的成本和找回数据时进行操作的成本 1. 在导航栏中找虚拟机快照的小图标 ...
- Java调用ssl异常(javax.net.ssl.SSLHandshakeException: No appropriate protocol)
今天做升级用了jdk1.8发现java调用SSL的时候,突然一下抛出一个异常 经过一阵瞎搞,最后才发现是因为jdk1.8版本导致SSL调用权限上有问题. 解决办法:找到jdk 1.8安装目录,找到C: ...
- jQuery——修改网页字体大小
HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- 【转】Linux系统编程---dup和dup2详解
正常的文件描述符: 在linux下,通过open打开以文件后,会返回一个文件描述符,文件描述符会指向一个文件表,文件表中的节点指针会指向节点表.看下图: 打开文件的内核数据结构 dup和dup2两个函 ...
- ORACLE批量绑定FORALL与BULK COLLECT
FORALL与BULK COLLECT的使用方法: 1.使用FORALL比FOR效率高,因为前者只切换一次上下文,而后者将是在循环次数一样多个上下文间切换. 2.使用BLUK COLLECT一次取出一 ...