我如何讓用戶自定義背景圖片？

當用戶能夠自定義頁面外觀時，現在許多網站都具有「主題化」功能。有時它只是一組固定的主題，但有時候人們可以自由選擇他們想要的任何風格 - 例如，它們可以設置頁面背景的任何顏色。我如何讓用戶自定義背景圖片？

我想更進一步 - 讓他們選擇背景圖片以及。流程非常簡單：用戶上傳文件（通過<input type="file" />），然後該文件成爲背景圖像 - 但僅限於此用戶。

雖然我在網上找不到關於此功能的任何信息，但我不知道該怎麼做。

我在想的是，如果用戶選擇一個背景，也許我可以使用HTML5 localstorage來使該背景每次訪問該頁面時都會出現。

來源

2013-02-03 DaKoder

請描述你的問題，所以人們可以actualy理解你 – Malyo

有多少用戶希望得到什麼？你會允許改變這些背景嗎？） – raina77ow

你甚至沒有[嘗試過]（http://whathaveyoutried.com/） –

這裏有一個概念驗證（主要是基於在MDN FileReader doc page + this answer給出的代碼）：

HTML：

<input id="test" type="file" onchange="loadImageFile(this)" />

JS：沒有包（頭）模式

$(switchBackground); 
var oFReader = new FileReader(), 
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

oFReader.onload = function(oFREvent) { 
    localStorage.setItem('b', oFREvent.target.result); 
    switchBackground(); 
}; 

function switchBackground() { 
    var backgroundImage = localStorage.getItem('b'); 
    if (backgroundImage) { 
    $('body').css('background-image', 'url(' + backgroundImage + ')');  
    } 
} 

function loadImageFile(testEl) { 
    if (! testEl.files.length) { return; } 
    var oFile = testEl.files[0]; 
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
    oFReader.readAsDataURL(oFile); 
}

這裏是working demo，在最新的Firefox和Chrome版本中進行了檢查。看起來工作好，至少。）

來源

2013-02-03 23:10:21 raina77ow

作品像一個魅力:)。 – DaKoder

一個問題：如何讓用戶從本地存儲中刪除背景圖像，將背景設置爲無？ – DaKoder

使用'localStorage.removeItem'來刪除圖像，並將另一個分支添加到'switchBackground（）'（這樣如果'backgroundImage'爲空，'background-image'被重置爲'none'）。 – raina77ow

這裏是解決這個問題的快速解決方案。

custom-background.js是一個輕量級的jQuery插件，允許用戶更改網站的默認背景並將選擇的背景保存到本地存儲。這個插件可以很容易地添加到任何網站或網絡應用程序，而不會對網站性能造成任何影響。

你可以從這裏下載並檢查代碼 https://github.com/CybrSys/custom-background.js

來源

2014-10-30 07:29:35

我如何讓用戶自定義背景圖片？

回答

相關問題