Có cách nào để đặt hình nền làm hình ảnh được mã hóa base64 không?

Question 1

Tôi muốn thay đổi nền động trong JS và tập hợp hình ảnh của tôi được mã hóa base64. Tôi thử:

document.getElementById("bg_image").style.backgroundImage = 
   "url('http://amigo.com/300107-2853.jpg')";

với kết quả hoàn hảo,

nhưng tôi không làm được như vậy với:

document.getElementById("bg_image").style.backgroundImage = 
   "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";

cũng không

document.getElementById("bg_image").style.backgroundImage = 
   "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

Có cách nào để làm điều đó?

Question 2

Tôi đã cố gắng làm giống như bạn, nhưng có vẻ như backgroundImage không hoạt động với dữ liệu được mã hóa. Để thay thế, tôi khuyên bạn nên sử dụng các lớp CSS và sự thay đổi giữa các lớp đó.

Nếu bạn đang tạo dữ liệu "đang bay", bạn có thể tải động các tệp 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;

Tôi đã tìm nó ở đây, nhấn nút và nó sẽ chuyển đổi hình nền của divs: http://jsfiddle.net/egorbatik/fFQC6/

Question 3

Gặp vấn đề tương tự với base64. Đối với bất kỳ ai trong tương lai có cùng vấn đề:

url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

Điều này sẽ hoạt động được thực thi từ bảng điều khiển, nhưng không phải từ trong tập lệnh:

$img.css("background-image", "url('" + url + "')");

Nhưng sau khi chơi với nó một chút, tôi đã nghĩ ra điều này:

var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");

Không hiểu tại sao nó hoạt động với hình ảnh proxy, nhưng nó có. Đã thử nghiệm trên Firefox Dev 37 và Chrome 40.

Hy vọng nó sẽ giúp một ai đó.

BIÊN TẬP

Điều tra sâu hơn một chút. Có vẻ như đôi khi mã hóa base64 (ít nhất là trong trường hợp của tôi) bị gián đoạn với CSS do các dấu ngắt dòng có trong giá trị được mã hóa (trong trường hợp của tôi, giá trị được tạo động bởi ActionScript).

Đơn giản chỉ cần sử dụng ví dụ:

$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

cũng hoạt động và thậm chí có vẻ nhanh hơn vài mili giây so với sử dụng hình ảnh proxy.

Question 4

Hãy thử cái này, tôi đã nhận được phản hồi thành công .. nó đang hoạt động

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

Question 5

Thêm thủ thuật này vào giải pháp sau của gabriel garcia -

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(' + img + ')';

Tuy nhiên, trong trường hợp của tôi, điều này không hoạt động. Di chuyển url vào biến img đã thực hiện một mẹo nhỏ. VẬY mã cuối cùng trông như thế này

var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;

Question 6

Tôi đã thử điều này (và hiệu quả với tôi):

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';

Cú pháp ES6:

let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = ´url('${img}')´

Tốt hơn một chút:

let setBackground = src=>{
    this.style.backgroundImage = `url('${src}')`
}

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF
setBackground.call(node, img)

Question 7

Những gì tôi thường làm, trước tiên là lưu trữ chuỗi đầy đủ vào một biến, như sau:

<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>

Sau đó, nơi tôi muốn JS thực hiện điều gì đó với biến đó:

<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>

Bạn có thể tham chiếu trực tiếp cùng một biến qua PHP bằng cách sử dụng một cái gì đó như:

<img src="<?php echo $img_id; ?>">

Làm việc cho tôi;)

Question 8

Đây là cách chính xác để thực hiện một cuộc gọi thuần túy. Không có CSS.

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

Question 9

Tôi nghĩ điều này sẽ hữu ích, Base64 được CSS giải quyết theo một cách khác, bạn nên đặt kiểu dữ liệu của hình ảnh thành base64, điều này sẽ giúp CSS thay đổi base64 thành hình ảnh và hiển thị cho người dùng. và bạn có thể sử dụng điều này từ javascript bằng cách gán hình nền bằng cách sử dụng jquery script, nó sẽ tự động thay đổi base64 thành mage và hiển thị nó

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

Mở rộng đoạn mã

Question 10

Trong trường hợp của tôi, đó chỉ là do tôi không đặt heightvà width.

Nhưng có một vấn đề khác.

Hình nền có thể được xóa bằng cách sử dụng

element.style.backgroundImage=""

nhưng không thể được đặt bằng cách sử dụng

element.style.backgroundImage="some base64 data"

Jquery hoạt động tốt.