Чи є спосіб встановити фонове зображення як кодоване зображення base64?

Я хочу динамічно змінювати фон у JS, і мій набір зображень закодований в base64. Я спробую:

document.getElementById("bg_image").style.backgroundImage = 
   "url('http://amigo.com/300107-2853.jpg')"; 

з ідеальним результатом,

але я не можу зробити те ж саме з:

document.getElementById("bg_image").style.backgroundImage = 
   "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";

ні

document.getElementById("bg_image").style.backgroundImage = 
   "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

Чи є спосіб зробити це?

Я намагався зробити те саме, що і ви, але, мабуть, backgroundImage не працює з закодованими даними. Як альтернативу я пропоную використовувати класи CSS та перехід між цими класами.

Якщо ви генеруєте дані "на льоту", ви можете динамічно завантажувати файли CSS.

CSS:

.backgroundA {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==");
}

.backgroundB {
    background-image:url("data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=");
}

HTML:

<div id="test" height="20px" class="backgroundA"> 
  div test 1
</div>
<div id="test2" name="test2" height="20px" class="backgroundB">
  div test2
</div>
<input type="button" id="btn" />

Javascript:

function change() {
    if (document.getElementById("test").className =="backgroundA") {
        document.getElementById("test").className="backgroundB";
        document.getElementById("test2").className="backgroundA";
    } else {
        document.getElementById("test").className="backgroundA";
        document.getElementById("test2").className="backgroundB";
    }
}

btn.onclick= change;

Я перекрутив його тут, натисніть кнопку, і він змінить фон div: http://jsfiddle.net/egorbatik/fFQC6/

Була така сама проблема з base64. Для тих, хто в майбутньому матиме таку ж проблему:

url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

Це буде працювати з консолі, але не з сценарію:

$img.css("background-image", "url('" + url + "')");

Але трохи погравши з цим, я придумав таке:

var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");

Поняття не маю, чому це працює із зображенням проксі, але це робить. Перевірено на Firefox Dev 37 та Chrome 40.

Сподіваюся, це комусь допомагає.

РЕДАГУВАТИ

Досліджували трохи далі. Здається, що іноді кодування base64 (принаймні в моєму випадку) розривається за допомогою CSS через розриви рядків, присутні у закодованому значенні (у моєму випадку значення динамічно генерується ActionScript).

Просто використовуючи наприклад:

$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

працює теж і навіть здається швидшим на кілька мс, ніж використання проксі-зображення.

Спробуйте це, я отримав відповідь на успіх ..це працює

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");

Додаючи цей фокус до наступного рішення Габріеля Гарсії -

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(' + img + ')';

Однак у моєму випадку це не спрацювало. Переміщення URL-адреси у змінну img зробило трюк. ТАК фінальний код виглядав так

var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img; 

Я спробував це (і працював у мене):

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';

Синтаксис ES6:

let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = ´url('${img}')´

Трохи краще:

let setBackground = src=>{
    this.style.backgroundImage = `url('${src}')`
}

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF
setBackground.call(node, img)

Що я зазвичай роблю, це спочатку зберігати повний рядок у змінній, наприклад:

<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>

Потім, де я хочу, щоб JS зробив щось із цією змінною:

<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>

Ви можете посилатися на ту саму змінну через PHP безпосередньо, використовуючи щось на зразок:

<img src="<?php echo $img_id; ?>">

Працює для мене;)

Це правильний спосіб зробити чистий дзвінок. Немає CSS.

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>

Я думаю, що це допоможе, CSS по-іншому звертається до CSS, вам слід встановити тип даних зображення на base64, це допоможе CSS змінити base64 на зображення та показати його користувачеві. і ви можете використовувати це з javascript, призначивши фонове зображення за допомогою скрипта jquery, він автоматично змінить base64 на mage і відобразить його

url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

У моєму випадку це було лише тому, що я не встановив heightі width.

Але є інше питання.

Фонове зображення можна видалити за допомогою

element.style.backgroundImage=""

але не вдалося встановити за допомогою

element.style.backgroundImage="some base64 data"

Jquery чудово працює.