Как разрешить пользователям настраивать фоновые изображения?

Многие сайты в наши дни имеют функциональность «тематизации», когда пользователь может настроить внешний вид страниц. Иногда это только фиксированный набор тем, но иногда люди вольны выбирать любой стиль, который они хотят — например, они могут установить любой цвет фона страниц.

Я хочу пойти еще дальше и позволить им также выбрать фоновое изображение. Процесс очень прост: пользователь загружает файл (через <input type="file" />), затем этот файл становится фоновым изображением, но только для этого пользователя.

Однако я не могу найти ничего об этой функции в Интернете и понятия не имею, что делать.

Еще я подумал, что если пользователь выбирает фон, возможно, я мог бы использовать HTML5 localstorage, чтобы этот фон появлялся каждый раз, когда посетитель посещает страницу.


javascript image css background skinning
person DaKoder    schedule 03.02.2013    source источник
comment
Пожалуйста, опишите свой вопрос, чтобы люди действительно могли вас понять   -  person Malyo    schedule 04.02.2013
comment
Сколько пользователей вы ожидаете получить? Вы позволите изменить эти фоны? )   -  person raina77ow    schedule 04.02.2013
comment
Вы даже не попытались   -  person Niet the Dark Absol    schedule 04.02.2013
comment
Проголосовал за это, потому что на самом деле это может быть довольно интересной задачей, если задействована только клиентская сторона. ) С серверной стороны все тривиально, но опять же, о серверной части ничего не упоминается... пока.   -  person raina77ow    schedule 04.02.2013
comment
Могу ли я узнать, в чем проблема с этим вопросом? Из-за этого я получил бан вопросов. Почему так много голосов против?   -  person DaKoder    schedule 05.02.2013
comment
@DaKoder Я отредактировал этот вопрос, чтобы сделать его немного яснее, но как по мне, даже в его прошлой форме он был достаточно понятен (и свеж). Опять же, сообщество SO думало иначе.   -  person raina77ow    schedule 05.02.2013
comment
Давайте проясним, ваш вопрос до редактирования не подходил для поэтому поэтому я считаю, что он был закрыт. Он был полон моих желаний, и я ничего не пробовал   -  person Alexander    schedule 05.02.2013

Ответы (2)


arrow_upward
3
arrow_downward

Вот доказательство концепции (в основном на основе кода, приведенного на странице документации 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. По крайней мере, работает нормально. )

person raina77ow    schedule 03.02.2013
comment
Один вопрос: как я могу разрешить пользователям удалять фоновое изображение из своего локального хранилища, установив для фона значение none? - person DaKoder; 04.02.2013
comment
Используйте localStorage.removeItem для удаления изображения, добавьте еще одну ветвь к switchBackground() (чтобы, если backgroundImage было пустым, background-image сбрасывалось на none). - person raina77ow; 04.02.2013
comment
@ raina770w Можете ли вы сделать для этого JS Fiddle? - person DaKoder; 04.02.2013
comment
@DaKoder Готово. Но скажите, не настолько ли подробно я описал подход, что он легко трансформируется в код? ) - person raina77ow; 04.02.2013

arrow_upward
0
arrow_downward

вот быстрое решение этой проблемы.

custom-background.js — это легкий плагин jQuery, позволяющий пользователям изменять фон веб-сайта по умолчанию и сохранять выбранный фон в локальном хранилище. Этот плагин можно легко добавить на любой веб-сайт или веб-приложение без ущерба для производительности веб-сайта.

вы можете скачать его отсюда и проверить код https://github.com/CybrSys/custom-background.js

person Shubham Badal    schedule 30.10.2014