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

Filereader图像缩略图滞后

  •  1
  • 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 年前
        1
  •  2
  •   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>