有没有办法把背景图像设置为 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...";

有什么办法吗？

261017 次浏览
小开
最佳答案

我也想这么做，但显然背景图像不能处理编码数据。作为替代，我建议使用 CSS 类和这些类之间的变化。

如果您正在“动态”生成数据，那么您可以动态地加载 CSS 文件。

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;
.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=");
}
<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" />

我把它摆弄在这里，按下按钮，它将切换的 div 的背景: http://jsfiddle.net/egorbatik/fFQC6/

小开

我通常的做法是首先将完整的字符串存储到一个变量中，如下所示:

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

对我有用;)

小开

试试这个, 我得到了成功的回应. . 它的工作

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

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

不知道为什么它可以和代理映像一起工作，但是它确实可以。

希望能帮到别人。

剪辑

进一步调查。似乎有时候 base64编码(至少在我的案例中)会因为编码值中的换行而与 CSS 断开(在我的案例中，值是由 ActionScript 动态生成的)。

简单地使用例如:

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

甚至比使用代理映像还要快几毫秒。

小开

这是进行纯调用的正确方法，不需要 CSS。

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

我尝试过这样做(并为自己工作) :

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);
小开

将这个技巧添加到 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;
小开

对我来说，这只是因为我没有设置 height和 width。

但还有一个问题。

背景图像可以使用

element.style.backgroundImage=""

但不能用

element.style.backgroundImage="some base64 data"

Jquery 工作正常。

小开

我觉得这个会有帮助, CSS 处理 Base64的方式不同，你应该将图像的数据类型设置为 Base64，这将有助于 CSS 将 base64改为图像并显示给用户。你可以通过 jquery 脚本分配背景图片来使用 javascript，它会自动将 base64变成图片并显示出来

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

小开

使用 数据 URI时，没有在 url中使用引号。

li {
background:
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}

提交答案