2

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

我想更进一步——让他们也选择背景图像。流程非常简单：用户上传一个文件（通过<input type="file" />），然后这个文件变成一个背景图片——但仅限于这个用户。

不过，我在网上找不到任何关于此功能的信息，我也不知道该怎么做。

我在想的另一件事是，如果用户选择了一个背景，也许我可以使用 HTML5localstorage让该背景在每次访问者访问页面时出现。

4

2 回答 2

3

这是一个概念证明（主要基于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);
}

这是一个工作演示，已签入最新的 Firefox 和 Chrome 版本。至少看起来工作正常。)

于 2013-02-03T23:10:21.360 回答
0

这是此问题的快速解决方案。

custom-background.js 是一个轻量级的 jQuery 插件，允许用户更改网站的默认背景并将选择的背景保存到本地存储。这个插件可以很容易地添加到任何网站或网络应用程序中，而不会影响网站的性能。

你可以从这里下载并检查代码 https://github.com/CybrSys/custom-background.js

于 2014-10-30T07:29:35.740 回答