代码之家 › 专栏 › 技术社区 › nick

Filereader图像缩略图滞后

filereader javascript

nick · 技术社区 · 7 年前

我使用Filereader API来显示照片上传的缩略图。然而,我有一个问题。当你上传非常大的图片,并且上传其中的一些图片时,它开始延迟。缩略图很小,但文件太大了。有办法解决这个问题吗?以下是我的javascript:

document.querySelector('input').addEventListener('change', function(e){
    var files = e.target.files;

  for(var i = 0; i < files.length; i++){

    var f = files[i];
    var reader = new FileReader();

    reader.onload = (function(tf){
      return function(evt){
        document.querySelector('.thumbs').innerHTML += '<div class="thumb" style="background-image: url('+evt.target.result+')"></div>';
      }
    })(f);

    reader.readAsDataURL(f);
  }
});

这里有一把小提琴,你可以在那里测试它: https://jsfiddle.net/snx79yw2/1/

顺便说一句,滞后是指减速、冻结等,而不是实际滞后。

我找到了 this post

1 回复 | 直到 7 年前

tklg 7 年前

document.querySelector('input').addEventListener('change', function(e){
  var files = e.target.files;
  for(var i = 0; i < files.length; i++){
    var f = files[i];
    var reader = new FileReader();

    reader.onload = (function(tf) {
      return function(evt) {
        // resize the image before using the resolved dataURL to set the thumbnail src
        resize(evt.target.result, 127, function(dataURL) {
          document.querySelector('.thumbs').innerHTML += `<img class="thumb" src="${dataURL}" />`;
        });
      }
    })(f)

    reader.readAsDataURL(f);
  }
});
/**
* usage   resize( dataURL:src, int:maxWidth, function:callback)
*/
function resize(src, maxWidth, callback) {
    var img = document.createElement('img');
    img.src = src;
    img.onload = () => {
      var oc = document.createElement('canvas');
      var ctx = oc.getContext('2d');
      // resize to [maxWidth] px
      var scale = maxWidth / img.width;
      oc.width = img.width * scale;
      oc.height = img.height * scale;
      ctx.drawImage(img, 0, 0, oc.width, oc.height);
      // convert canvas back to dataurl
      callback(oc.toDataURL());
    }
}

.thumbs{background: #222;border-radius: 5px;white-space: nowrap;overflow-x: scroll;padding: .25rem;}
.thumb{height: 3rem;width: 3rem;border-radius: 3px;background-size: cover;background-position: center center;background-repeat: no-repeat;display: inline-block;margin: .25rem .25rem calc(.25rem - 4px);}

<input type="file" multiple />
<div class="thumbs"></div>

推荐文章

Scott-MEARN-Developer · FileReader()以角度返回未定义和伪路径

2 年前

Ike C. · 文件读取和变量分配

6 年前

Adam Fraser · 以字符串形式高效地读取java中的任何文件

6 年前

LuÃs Martins · 读取行,直到找到特定字符

6 年前

mr.jogurt · 读取txt中的每一行

6 年前

Philip · 如何使用JavaScript将html文件立即加载到textarea框中?[副本]

6 年前

Luxas · React DropzoneComponent在上载之前在本地打开/修改文件

6 年前

Meowminator · FileWriter有没有办法将文本文件中的第一行移到底部?

6 年前

Marco · php上载前使用FileReader调整多个图像大小

7 年前

Angelux · FileRead()将内容存储到类变量中

7 年前