2

最近の多くのサイトには、ユーザーがページの外観をカスタマイズできる「テーマ」機能があります。テーマのセットが固定されている場合もありますが、ユーザーが自由にスタイルを選択できる場合もあります。たとえば、ページの背景の色を設定できます。

さらに一歩進んで、背景画像も選択してもらいたいと思います。フローは非常に単純です。ユーザーが（を介して<input type="file" />）ファイルをアップロードすると、このファイルは背景画像になりますが、このユーザーのみが対象です。

しかし、私はこの機能についてオンラインで何も見つけることができず、何をすべきかについての手がかりがありません。

他に考えていたのは、ユーザーが背景を選択した場合、localstorage訪問者がページにアクセスするたびにHTML5を使用してその背景を表示できるかもしれないということでした。

4

2 に答える 2

3

これが概念実証です（主にMDN FileReaderドキュメントページ+この回答で提供されているコードに基づいています）：

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は、ユーザーがWebサイトのデフォルトの背景を変更し、選択した背景をローカルストレージに保存できるようにする軽量のjQueryプラグインです。このプラグインは、Webサイトのパフォーマンスを損なうことなく、任意のWebサイトまたはWebアプリに簡単に追加できます。

ここからダウンロードして、コード https://github.com/CybrSys/custom-background.jsを確認できます。

于 2014-10-30T07:29:35.740 に答える