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

【问题标题】：Is there a way to set background-image as a base64 encoded image?有没有办法将背景图像设置为 base64 编码图像？
【发布时间】：2013-06-10 01:05:20
【问题描述】：

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

有什么办法吗？

【问题讨论】：

  • url(' 应该可以工作，我的问题是 ActionScript dataURL 实际上有换行符，我必须 replace(/\n/g, '')

标签： javascript base64 background-image


【解决方案1】：

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

【讨论】：

  • 谢谢，但我的工作量很大，所以交换课程是不切实际的。
  • @IgorSavinkin 以及将来阅读此内容的任何人。如果您同时将许多元素更改为相同的背景，则可以使用 css 级联渲染，方法是针对要更改的每个元素放置一个类，但更改公共祖先元素的类。例如，css 为 #ancestor.backgroundA .Change{background-image:...} 和 #ancestor.backgroundB .Change{background-image...}，其中 #ancestor 是共同祖先的 id，.Change 是应用于要应用其中一个背景的所有元素的类。
  • 看到每个人都投票给这个答案是最好的，这很有趣，甚至在考虑创建一个有一百万个类的 CSS 是否是一个好习惯......甚至更好：一个包含一百万个 base64 的 CSS编码图像（提示：想想一个包含一百万个可能高清图像的文件夹）。但是，是的，这适用于一些图像。
  • 另外，您将如何解决将新图像添加到系统可用图像的问题？这种方法甚至可以扩展吗？
【解决方案2】：

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

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

【讨论】：

  • 删除换行符为我修复了它。
  • 很好的调查。
【解决方案3】：

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

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

【讨论】：

  • 似乎data:image/png;base64 很长，并且字符串定义为 jquery 变量，则不起作用。但如果字符串定义为 php 变量（如 PHLaus 示例），则可以工作......只是关于我测试的信息
【解决方案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;

【讨论】：

  • @Amit Kumar Rai 你是对的。我的代码中缺少单引号，这是您实际编写的，因此您的代码可以正常工作。
【解决方案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);

【讨论】：

  • 很有趣，因为这正是人们所说的行不通的代码。
  • 这也适用于我。也在 Microsoft Edge 和 IE 11 上测试
【解决方案6】：

这是进行纯调用的正确方法。没有 CSS。 

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

【讨论】：

  • div
  • 要发布代码，将其缩进四个空格或选择它并按 Ctrl-K。
【解决方案7】：

我认为这会有所帮助， CSS 以不同的方式处理 Base64，您应该将图像的数据类型设置为 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, "") + "')");

【讨论】：

  • 不鼓励使用纯代码的答案。请点击edit 并添加一些词来总结您的代码如何解决问题，或者解释您的答案与之前的答案/答案有何不同。我看不出这与之前发布的答案之一有任何真正的区别。
【解决方案8】：

我通常会先将完整的字符串存储到一个变量中，如下所示：

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

为我工作；）

【讨论】：

    【解决方案9】：

    在使用data URIs 时，不要不要在url 中使用引号。

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

    【讨论】：

      【解决方案10】：

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

      但是还有一个问题。

      背景图片可以使用

      element.style.backgroundImage=""

      但无法使用

      element.style.backgroundImage="some base64 data"

      Jquery 工作正常。

      【讨论】：

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode