现在许多网站都具有“主题化”功能,用户可以自定义页面的外观。有时它只是一组固定的主题,但有时人们可以自由选择他们想要的任何样式 - 例如,他们可以设置页面背景的任何颜色。
我想更进一步 - 让他们也选择背景图像。流程非常简单:用户上传一个文件(通过 <input type="file" />
),然后该文件成为背景图像 - 但仅限于该用户。
不过,我在网上找不到任何有关此功能的信息,而且我不知道该怎么做。
我在想的另一件事是,如果用户选择背景,也许我可以使用 HTML5 localstorage
使该背景在访问者每次访问该页面时出现。
最佳答案
这是一个概念证明(主要基于 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 版本。至少看起来工作正常。 )
关于javascript - 如何让用户自定义背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14678207/