Есть ли способ установить фоновое изображение в качестве кодированного изображения base64?

Ответ 1

Я попытался сделать то же самое, что и вы, по-видимому, 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;

Я попробовал это здесь, нажмите кнопку, и он переключит фон divs: http://jsfiddle.net/egorbatik/fFQC6/

Ответ 2

Попробуйте это, У меня есть успешный ответ..и работаем

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

Ответ 3

Имела ту же проблему с base64. Для любого в будущем с той же проблемой:

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

Это будет выполняться с консоли, но не из script:

$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, "") + "')");

работает тоже, и даже кажется, что он быстрее на несколько мс, чем с использованием прокси-образа.

Ответ 4

Добавление этого трюка к следующему решению gabriel garcia -

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; 

Ответ 5

Я попробовал это (и работал для меня):

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)

Ответ 6

То, что я обычно делаю, заключается в том, чтобы сначала сохранить полную строку в переменной:

<?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; ?>">

Работает для меня;)

Ответ 7

Это правильный способ сделать чистый вызов. Нет CSS.

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

Ответ 8

В моем случае это было только потому, что я не установил height и width.

Но есть и другая проблема.

Фоновое изображение может быть удалено с помощью

element.style.backgroundImage=""

но не может быть установлен с помощью

element.style.backgroundImage="some base64 data"

Jquery работает отлично.

Ответ 9

Я думаю это поможет

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