有没有办法将background-image设置为base64编码图像？

问题描述 投票：0回答：11

我想在 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
11个回答
164
投票

我尝试做与你相同的事情，但显然背景图像不适用于编码数据。作为替代方案，我建议使用 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/

50
投票

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

也有效，甚至似乎比使用代理图像快了几毫秒。

36
投票

试试这个， 我收到了成功回复..它正在工作

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

将此技巧添加到加布里埃尔·加西亚的以下解决方案中 - 

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;
11
投票

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

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);
4
投票

这才是纯调用的正确方式。没有CSS。 

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

我认为这会有所帮助， Base64由CSS以不同的方式寻址，您应该将图像的数据类型设置为base64，这将有助于CSS将base64更改为图像并将其显示给用户。您可以通过使用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, "") + "')");

3
投票

使用数据 URI 时

不要
在url内使用引号。

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}
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; ?>">

对我有用；）

0
投票

就我而言，这只是因为我没有设置

height
和
width
。

但是还有一个问题。

可以使用

删除背景图像 

element.style.backgroundImage=""

但无法使用

进行设置 

element.style.backgroundImage="some base64 data"

Jquery 工作正常。

0
投票

还要确保您要设置背景图像的目标元素具有以下 CSS 设置：

display: block; /* might be 'inline-block' as well */
width: 24; /* define the image width here */
height: 24; /* define the image width here */

否则图像可能无法正常显示。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.