[javascript] 배경 이미지를 base64로 인코딩 된 이미지로 설정하는 방법이 있습니까?

Program / 글쓴이

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

할 방법이 있습니까?

답변

나는 당신과 똑같이하려고했지만 분명히 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" />

자바 스크립트 :

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/

답변

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

또한 작동하며 프록시 이미지를 사용하는 것보다 몇 ms 더 빠른 것 같습니다.

답변

이것을 시도해보십시오. 성공 응답이 있습니다.

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

답변

이 트릭을 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;

답변

나는 이것을 시도했다 (그리고 나를 위해 일했다) :

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)

답변

내가 일반적으로하는 일은 먼저 전체 문자열을 변수에 저장하는 것입니다.

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

나를 위해 작동합니다;)

답변

이것은 순수한 전화를 거는 올바른 방법입니다. CSS가 없습니다.

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