क्या पृष्ठभूमि-छवि को बेस 64 एनकोडेड छवि के रूप में सेट करने का एक तरीका है?

Question

मैं जेएस में पृष्ठभूमि को गतिशील रूप से बदलना चाहता हूं और मेरी छवियों का सेट बेस 64 एनकोडेड में है। मैं कोशिश करूँगा:

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

इसे करने का कोई तरीका है?

Comments

url('काम करना चाहिए, मेरी समस्या यह है कि ActionScript dataURL वास्तव में नई-पंक्तियों था था, और मैं ही थाreplace(/\n/g, '')

— neaumusic

Answer 1

मैंने आपके जैसा ही करने की कोशिश की, लेकिन जाहिर तौर पर बैकग्राउंडइमेज एन्कोडेड डेटा के साथ काम नहीं करता है। एक विकल्प के रूप में, मैं सीएसएस वर्गों और उन वर्गों के बीच परिवर्तन का उपयोग करने का सुझाव देता हूं।

यदि आप "फ्लाई पर" डेटा उत्पन्न कर रहे हैं, तो आप सीएसएस फ़ाइलों को गतिशील रूप से लोड कर सकते हैं।

सीएसएस:

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

मैंने इसे यहां क्लिक किया, बटन दबाएं और यह divs की पृष्ठभूमि को बदल देगा: http://jsfiddle.net/egorbatik/fFQC6/

Comments

धन्यवाद, फिर भी मैं बड़ी मात्रा में तत्वों के साथ काम करता हूं, इसलिए कक्षाओं का आदान-प्रदान करना व्यावहारिक नहीं है।

— इगोर सैविंकिन

@IgorSavinkin और जिसे भी भविष्य में पढ़ता है। यदि आप बहुत सारे तत्वों को एक साथ एक ही पृष्ठभूमि में बदल रहे हैं, तो आप प्रत्येक तत्व के खिलाफ एक वर्ग डालकर, जिसे आप परिवर्तित करना चाहते हैं, लेकिन एक सामान्य पूर्वज तत्व के वर्ग को बदलकर आप प्रतिपादन को कैस्केड करने के लिए सीएसएस का उपयोग कर सकते हैं। उदाहरण के लिए, सीएसएस होगा #ancestor.backgroundA .Change{background-image:...}और #ancestor.backgroundB .Change{background-image...}, जहां #ancestorसामान्य पूर्वज की आईडी है, और .Changeसभी तत्वों के लिए लागू की जाने वाली कक्षा है जिसमें से किसी एक को लागू करना है।

— पतंजलि

यह सोचकर कि हर कोई इस उत्तर को वोट देने से पहले सबसे बेहतर है, भले ही वह लाख कक्षाओं के साथ एक सीएसएस बनाने के लिए एक अच्छा अभ्यास होगा ... या इससे भी बेहतर: एक सीएसएस जिसमें एक लाख बेस 64 एनकोडेड चित्र (टिप: सिर्फ सोचें एक फ़ोल्डर एक लाख के साथ शायद HD, इसमें चित्र)। लेकिन हाँ, यह कुछ छवियों के लिए काम करता है।

— गाब्रिएल गार्सिया

इसके अलावा, आप अपने सिस्टम में उपलब्ध छवियों में नई छवियों को जोड़ने की समस्या को कैसे हल करेंगे? इस दृष्टिकोण भी स्केलेबल है?

— गाब्रिएल गार्सिया

Answer 2

बेस 64 के साथ भी यही समस्या थी। भविष्य में किसी के लिए भी यही समस्या है:

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

पता नहीं क्यों यह प्रॉक्सी छवि के साथ काम करता है, लेकिन यह करता है। फ़ायरफ़ॉक्स देव 37 और क्रोम 40 पर परीक्षण किया गया।

आशा है कि यह किसी की मदद करता है।

संपादित करें

थोड़ी और खोजबीन की। ऐसा प्रतीत होता है कि कभी-कभी बेस 64 एन्कोडिंग (मेरे मामले में कम से कम) सीएसएस के साथ टूट जाता है क्योंकि एन्कोडेड वैल्यू में मौजूद लाइन ब्रेक के कारण (मेरे केस वैल्यू को एक्शनस्क्रिप्ट द्वारा गतिशील रूप से उत्पन्न किया गया था)।

बस उदाहरण का उपयोग कर:

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

बहुत अधिक काम करता है, और यहां तक ​​कि कुछ एमएस द्वारा छद्म छवि का उपयोग करने से भी तेज लगता है।

Comments

लाइन ब्रेक को हटाकर मेरे लिए इसे ठीक कर दिया।

— इवान

अच्छी जांच।

— सॉल्वे टॉर्ने

Answer 3

यह कोशिश करो, मुझे सफलता की प्रतिक्रिया मिली है .. यह काम कर रहा है

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

Comments

यदि data:image/png;base64लंबे समय तक लगता है, और स्ट्रिंग को jquery चर के रूप में परिभाषित किया जाता है, तो काम नहीं करता है। लेकिन काम करता है अगर स्ट्रिंग php चर के रूप में परिभाषित PHClaus उदाहरण .... मैं क्या परीक्षण के बारे में बस जानकारी

— Andris

Answer 4

इस ट्रिक को गैब्रिएल गार्सिया के निम्नलिखित समाधान में जोड़ना -

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

हालाँकि, मेरे मामले में यह काम नहीं कर रहा था। Img वैरिएबल में चल रहे url ने चाल चली। तो अंतिम कोड इस तरह दिखता था

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

Comments

@ अमित कुमार राय आप सही कह रहे हैं। मुझे अपने कोड पर एकल उद्धरण याद आ रहे थे, जिसे आपने वास्तव में लिखा था इसलिए आपका कोड काम करता है।

— गैब्रिएल गार्सिया

Answer 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);

Comments

मजेदार, क्योंकि यह ठीक यही कोड है जो लोग कह रहे हैं कि काम नहीं करता है।

— पिंप ट्राइजकिट

यह मेरे लिए भी काम करता है। माइक्रोसॉफ्ट एज और IE 11 के साथ

— रयान

Answer 6

मैं आमतौर पर क्या करता हूं, पूर्ण स्ट्रिंग को पहले एक चर में स्टोर करना है, जैसे:

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

फिर, जहाँ मुझे या तो JS को उस चर के साथ कुछ करना है:

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

आप पीएचपी के माध्यम से एक ही चर का संदर्भ सीधे कुछ का उपयोग करके कर सकते हैं जैसे:

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

मेरे लिये कार्य करता है ;)

Answer 7

शुद्ध कॉल करने का यह सही तरीका है। कोई सीएसएस नहीं।

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

Comments

<div style = 'पृष्ठभूमि: यूआरएल (डेटा: छवि / PNG; बेस 64, iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC) दोहराने-x केंद्र;'> </ div>

— user5641497

कोड पोस्ट करने के लिए, इसे चार स्थानों से इंडेंट करें या इसे चुनें और Ctrl-K दबाएं।

Answer 8

मुझे लगता है कि यह मदद करेगा, Base64 को सीएसएस द्वारा एक अलग तरीके से संबोधित किया जाता है, आपको डेटा प्रकार की छवि को बेस 64 पर सेट करना चाहिए, इससे सीएसएस को बेस 64 को छवि में बदलने और उपयोगकर्ता को प्रदर्शित करने में मदद मिलेगी। और आप जावास्क्रिप्ट स्क्रिप्ट का उपयोग करके पृष्ठभूमि की छवि असाइन करके जावास्क्रिप्ट से इसका उपयोग कर सकते हैं, यह स्वचालित रूप से बेस 64 को दाना में बदल देगा और इसे प्रदर्शित करेगा

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

Comments

कोड-केवल उत्तर हतोत्साहित किए जाते हैं। कृपया संपादित करें पर क्लिक करें और कुछ शब्दों को जोड़ते हुए कहें कि आपका कोड प्रश्न को कैसे संबोधित करता है, या शायद समझाएं कि आपका उत्तर पिछले उत्तर / उत्तरों से कैसे भिन्न है। मैं इसके और पहले पोस्ट किए गए उत्तरों में से कोई भी वास्तविक अंतर नहीं देख सकता।

— निक

Answer 9

मेरे मामले में, यह सिर्फ इसलिए था क्योंकि मैंने heightऔर सेट नहीं किया था width।

लेकिन एक और मुद्दा है।

पृष्ठभूमि छवि का उपयोग करके हटाया जा सकता है

element.style.backgroundImage=""

लेकिन का उपयोग कर सेट नहीं किया जा सकता है

element.style.backgroundImage="some base64 data"

जेकरी ठीक काम करता है।