关于图片预览使用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 ...
随机推荐
- [测试]单元测试框架NUnit
说到测试,相信大家都或多或少了解. 按照各自分类,就自己知道包括 A.单元测试.集成测试.系统测试 B.白盒测试.黑盒测试 C.压力测试.性能测试.安全测试 ...... 反正是太多太多.就做开发以来 ...
- bzoj1875 [SDOI2009]HH去散步——矩阵快速幂
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1875 有个限制是不能走回头路,比较麻烦: 所以把矩阵中的元素设成边的经过次数,单向边之间就好 ...
- softmax function in c++
#include <iostream> #include <vector> #include <cmath> #include <algorithm> ...
- uva1560
In an extended version of the game Lights Out®, is a puzzle with 5 rows of 6 buttons each (the actua ...
- bzoj 1029: [JSOI2007]建筑抢修【贪心+堆】
第一想法是按照结束时间贪心,但是这样有反例 所以先按照t贪心,能选则选,把选的楼的持续时间放进大根堆里,当当前的楼不能选的时候如果当前的持续时间比大根堆里最大的要小,就用这个替换最大,这样总数不变但是 ...
- EntityFramework:An error occurred while executing the command definition. See the inner exception for details.
错误描述: 调用EF中的FirstOrDefault()时,报错误:An error occurred while executing the command definition. See the ...
- [Qt Creator 快速入门] 第0篇 开始学习Qt 与Qt Creator
Qt官方信息 Qt官网:http://qt.digia.com/ Qt开源官网:http://qt-project.org/ Qt最新版本下载:http://qt-project.org/downlo ...
- 在控制台中输出 ASP.NET 网站的跟踪信息
实现方法: 1. 可以在 C# 代码中调用 System.Diagnostics.Debug.WriteLine() 来实现. 其效果类似于在控制台应用程序中调用 Console.WriteLine( ...
- python程序展现图片遇到的坑
使用cv2展示图片的时候遇到了问题,提示:TypeError: Required argument 'mat' (pos 2) not found 给定的图片路径是没得问题的,代码如下: 使用open ...
- webpack学习汇总
一. 安装 window : 附件 --- 命令提示符 1:node -------- http://pan.baidu.com/s/1boFor3D node -v : 查看版本: npm conf ...