如何使用FileReader加載圖像並有效地將其設置爲數千個div的背景？

目前，我正在使用FileReader從用戶系統加載精靈表png，並將數據作爲其src保存到Image變量中。然後我填充一個單獨的DIV超過一千div的，他們每個人都有一個如何使用FileReader加載圖像並有效地將其設置爲數千個div的背景？

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

這變成：在元素

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

。圖像可能非常大，並且可能會有多達2048個這些圖像。這造成了很多創作滯後。

我對此任務的限制是我無法對服務器進行任何調用，文件上傳和顯示都必須位於前端。否則，我只會將文件保存到服務器，並使用帶有URL的CSS，以便瀏覽器可以緩存圖像並在所有div上使用樣式。

有沒有更好的方法可以做到這一點？我可以使用JS爲所有元素提供全局樣式嗎？

來源

2016-12-05 Steven Rogers

好，StackOverflow的例如使用這種精靈片。它不是將它切成許多塊，而是簡單地對元素進行尺寸調整，然後在工作表中使用偏移量以確保圖像的右側部分分別顯示。你可以在http://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3 – enhzflep

找到spritesheet。正在上傳的png是一個spritesheet。在我的問題中，用戶正在上傳工作表（png），然後將其複製到其他div，然後重新定位。我的問題是你如何複製工作表（PNG）在多個div而不提出任何服務器請求？ –

*數千個divs？所有這些div在同一時間在屏幕上？ –

在使用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>

來源

2016-12-05 20:55:52 DavidDomain

是的，你可以添加使用這個CSS：

document.styleSheets[0].insertRule('class="myClass" {background-image: url(' + loadedImage.src + '}', 0)

來源

2016-12-05 20:57:43

如何使用FileReader加載圖像並有效地將其設置爲數千個div的背景？

回答

相關問題