关于图片预览使用base64在chrome上的性能问题解决方法

Posted 孤云独去闲

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于图片预览使用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实现图片上传预览功能,使用base64编码来实现

图片预览 base64 element 图片上传 预览图

关于xheditor粘贴图片自动上传

关于umeditor粘贴图片自动上传

HTML5 MUI 手机预览图片,裁剪上传base64,保存数据库

JavaCV音视频开发宝典:JavaCV读取Base64编码图片并解析预览图片