有没有一种方法来设置背景图片在JavaScript一个base64连接codeD映像? [英] Is there a way to set background-image as a base64 encoded image in javascript?
问题描述
动态我想改变背景JS和我组图片是用base64 EN codeD。
我尝试:
I wanna change background dynamically in JS and my set of images is in base64 encoded. I try:
的document.getElementById(bg_image)style.backgroundImage =URL('http://amigo.com/300107-2853.jpg');
与完美的结果,
但我不能做同样的:的document.getElementById(bg_image)style.backgroundImage =URL(数据:图像/ PNG; BASE64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE ......')。 ;
也没有
的document.getElementById(bg_image)style.backgroundImage =数据:图像/ PNG; BASE64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE ...;
有没有办法做到这一点?
Is there any way to do it?
推荐答案
我试图做的和你一样,显然是和backgroundImage不与方式编码数据。作为替代方案,我建议使用CSS类和这些类之间的变化。
I tried to do the same as you, apparently is the backgroundImage doesn't work with enconded data. As an alternative I suggest to use css classes and the change between those classes.
如果您正在生成对飞中的数据可以动态加载CSS文件。
If you are generating the data "on the fly" you can load the css files dynamically.
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:
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;
我拨弄在这里,preSS按钮,就会切换的div的背景: http://jsfiddle.net/ egorbatik / fFQC6 /
这篇关于有没有一种方法来设置背景图片在JavaScript一个base64连接codeD映像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!