javascript - 如何使用 FileReader 加载图像并将其有效地设置为数千个 div 的背景？

Question

目前我正在使用 FileReader 从用户系统加载 sprite sheet png 并将数据保存到 Image 变量作为其 src。然后我用超过一千个 div 填充一个单独的 div，每个 div 都有一个

style="background-image: url(' + loadedImage.src + ');

变成:

style="background-image: url(data:image/png;base64,iVBORw0KGgoAAA...)"

在元素中。图片可能很大，最多可以有 2048 张这样的图片。这会在创建时造成很多延迟。

我在这个任务上的局限性是我不能对服务器进行任何调用，文件上传和显示都必须在前端进行。否则，我会将文件保存到服务器并使用带有 URL 的 CSS，以便浏览器可以缓存图像并将样式应用于所有 div。

有没有更好的方法可以做到这一点？我可以使用 JS 为所有元素添加全局样式吗？

Answer 1

您实际上可以在使用 FileReader API 读取图像后向现有样式表添加规则。

也许这样的事情会奏效。只是一个想法。

var sheet = document.styleSheets[1];

function fileReader(e) {
  if(window.FileReader) {
    var file  = e.target.files[0];
    var reader = new FileReader();
    if (file && file.type.match('image.*')) {
      reader.readAsDataURL(file);
    } else {
      console.log('please add an image')
    }
    reader.onloadend = function (e) {
      sheet.insertRule(".foo" + "{ background:url(" + reader.result + ")}", 0);
    }
  }
}

document.getElementById('add-img').addEventListener('change', fileReader, false);

.foo {
  width: 100px;
  height: 100px;
}

<input type="file" id="add-img" />
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>