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

时间:2013-06-13 15:07:10

标签: javascript base64 background-image

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

有什么办法吗?

8 个答案:

答案 0 :(得分:55)

我试着像你一样做,显然是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/

答案 1 :(得分:23)

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

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

答案 2 :(得分:16)

与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 :(得分:6)

将此技巧添加到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; 

答案 4 :(得分:3)

我试过这个(并为我工作):

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)

答案 5 :(得分: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; ?>">

适合我;)

答案 6 :(得分:0)

在我的情况下,这仅仅是因为我没有设置heightwidth

但是还有另一个问题。

可以使用删除背景图片

element.style.backgroundImage=""

但无法使用设置

element.style.backgroundImage="some base64 data"

jQuery工作正常。

答案 7 :(得分:0)

我认为这会有所帮助

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