我如何让用户自定义背景图片？

当用户能够自定义页面外观时，现在许多网站都具有“主题化”功能。有时它只是一组固定的主题，但有时候人们可以自由选择他们想要的任何风格 - 例如，它们可以设置页面背景的任何颜色。我如何让用户自定义背景图片？

我想更进一步 - 让他们选择背景图片以及。流程非常简单：用户上传文件（通过<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

我如何让用户自定义背景图片？

回答

相关问题