有没有办法将背景图像设置为base64编码图像？

84

我想在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...";

有什么办法吗？

javascript  base64  background-image 
— 伊戈尔·萨文金（Igor Savinkin）
source
url('应该起作用，我的问题是ActionScript dataURL实际上有换行符，我不得不replace(/\n/g, '')
— neaumusic

Answers:

90

我尝试过和您一样，但显然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/

— 埃泽奎尔·戈尔巴迪克（Ezequiel Gorbatik）
source
谢谢，但是我要处理大量的元素，因此交换类是不切实际的。
— Igor Savinkin 2013年
1
@IgorSavinkin和将来阅读此书的人。如果要同时将许多元素更改为相同的背景，则可以使用CSS来层叠渲染，方法是将类放置在要更改的每个元素上，但要更改公共祖先元素的类。例如，css将是#ancestor.backgroundA .Change{background-image:...}和#ancestor.backgroundB .Change{background-image...}，其中#ancestor是共同祖先的id，并且.Change是应用于背景之一的所有元素的类。
— Patanjali
看到所有人投票投票这个答案是最好的，这是很可笑的，甚至还没有想到创建具有一百万个类的css是一个好习惯……甚至更好：一个包含一百万个base64编码图像的css（提示：包含一百万个高清图像的文件夹）。但是，是的，这适用于一些图像。
— 加布里埃尔·加西亚
此外，您将如何解决将新图像添加到系统可用图像的问题？这种方法甚至可以扩展吗？
— 加布里埃尔·加西亚
32

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

也可以使用，甚至比使用代理映像要快几毫秒。

— 黄体
source
2
删除换行符对我来说很固定。
— 埃文（Evan）
好的调查
— 解决Tornøe
31

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

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
— Gihansalith
source
似乎data:image/png;base64很长，并且字符串定义为jquery变量，则无法正常工作。但是，如果将字符串定义为php变量（例如PHClaus示例），则可以工作....有关我测试的内容的信息
— Andris
12

将这个技巧添加到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;
— 阿米特·库玛·赖（Amit Kumar Rai）
source
1
@Amit Kumar Rai，您是对的。我错过了我的代码上的单引号，因为您实际上写的是单引号，因此您的代码可以工作。
— 加布里埃尔·加西亚
7

我尝试了这个（并为我工作）：

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)
— 加布里埃尔·加西亚
source
1
有趣的是，因为这正是人们所说的代码不起作用。
— Pimp Trizkit
这也对我有用。也在Microsoft Edge和IE 11上进行了测试
— Ryan.C
2

我通常要做的是先将完整的字符串存储到变量中，如下所示：

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

为我工作;）

2

这是拨打电话的正确方法。没有CSS。

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
— 用户名
source
<DIV风格= '背景：URL（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC）重复-X中心;'> </ DIV>
— user5641497
要发布代码，请将代码缩进四个空格或选择它，然后按Ctrl-K。
2

我认为这会有所帮助，CSS用不同的方式处理Base64，您应该将图像的数据类型设置为base64，这将有助于CSS将base64更改为image并将其显示给用户。并且您可以通过使用jQuery脚本分配背景图片从javascript中使用它，它将自动将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, "") + "')");
展开摘要

— 拉米·穆罕默德（Rami Mohammed）
source
不鼓励仅使用代码的答案。请单击“编辑”并添加一些单词，以概括您的代码如何解决问题，或者说明您的答案与以前的答案有何不同。我看不到这与先前发布的答案之一之间的真正区别。
— 尼克，
0

就我而言，这只是因为我没有设置height和width。

但是还有另一个问题。

可以使用删除背景图片

element.style.backgroundImage=""

但无法使用设置

element.style.backgroundImage="some base64 data"

jQuery的工作正常。

— be
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.