ব্যাকগ্রাউন্ড-চিত্রটি বেস 64 এনকোডযুক্ত চিত্র হিসাবে সেট করার কোনও উপায় আছে কি?

Question 1

আমি জেএসে গতিশীল পটভূমি পরিবর্তন করতে চাই এবং আমার চিত্রগুলির সেটটি বেস 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...";

এটা করতে কোন উপায় আছে কি?

Question 2

আমি আপনার মতোই চেষ্টা করার চেষ্টা করেছি, তবে দৃশ্যত পটভূমি চিত্র এনকোডড ডেটার সাথে কাজ করে না। বিকল্প হিসাবে, আমি সিএসএস ক্লাস এবং সেই ক্লাসগুলির মধ্যে পরিবর্তনগুলি ব্যবহার করার পরামর্শ দিই।

যদি আপনি "ফ্লাইতে" ডেটা তৈরি করে থাকেন তবে আপনি সিএসএস ফাইলগুলি গতিশীলভাবে লোড করতে পারেন।

সিএসএস:

.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=");
}

এইচটিএমএল:

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

আমি এটি এখানে ঝাঁকিয়েছি, বোতাম টিপুন এবং এটি ডিভসের ব্যাকগ্রাউন্ড পরিবর্তন করবে: http://jsfiddle.net/egorbatik/fFQC6/

Question 3

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

এমনকি খুব কার্যকর হয় এবং এমনকি প্রক্সি চিত্র ব্যবহারের চেয়ে কয়েক এমএস করে দ্রুত বলে মনে হয়।

Question 4

এটি চেষ্টা করুন, আমি সাফল্যের প্রতিক্রিয়া পেয়েছি ..এর কাজ করে

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

Question 5

গ্যাব্রিয়েল গার্সিয়ার নিম্নলিখিত সমাধানগুলিতে এই কৌশলটি যুক্ত করা -

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

তবে, আমার ক্ষেত্রে এটি কাজ করে না। ইউআরএল ভেরিয়েবলের মধ্যে ইউআরএল সরানো কৌতুকটি করেছিল। চূড়ান্ত কোডটি এর মতো দেখায়

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

Question 6

আমি এটি চেষ্টা করেছি (এবং আমার জন্য কাজ করেছেন):

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

Question 7

আমি সাধারণত যা করি তা হ'ল প্রথমে সম্পূর্ণ স্ট্রিংটিকে ভেরিয়েবলের মধ্যে সংরক্ষণ করা:

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

তারপরে, যেখানে আমি জেএসকে সেই পরিবর্তনশীল দিয়ে কিছু করতে চাই:

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

আপনি পিএইচপি এর মাধ্যমে সরাসরি এই জাতীয় কিছু ব্যবহার করে একই পরিবর্তনশীলটি উল্লেখ করতে পারেন:

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

আমার জন্য কাজ কর ;)

Question 8

খাঁটি কল করার সঠিক উপায় এটি। সিএসএস নেই।

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

Question 9

আমি মনে করি এটি সাহায্য করবে, বেস 64 একটি ভিন্নভাবে সিএসএস দ্বারা সম্বোধন করবে, আপনার চিত্রের ডেটা টাইপটি বেস 64 এ সেট করা উচিত, এটি সিএসএসকে বেস 64 কে চিত্রটিতে পরিবর্তন করতে এবং এটি ব্যবহারকারীর কাছে প্রদর্শন করতে সহায়তা করবে। এবং আপনি এটি জাভাস্ক্রিপ্ট থেকে jquery স্ক্রিপ্ট ব্যবহার করে পটভূমি চিত্র নির্ধারণ করে ব্যবহার করতে পারেন, এটি স্বয়ংক্রিয়ভাবে বেস 64 কে ম্যাগ করে প্রদর্শন করবে

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

স্নিপেট প্রসারিত করুন

Question 10

আমার ক্ষেত্রে, এটা ঠিক, কারণ আমি সেট না ছিল heightএবং width।

তবে আরও একটি বিষয় আছে।

পটভূমি চিত্র ব্যবহার করে সরানো যেতে পারে

element.style.backgroundImage=""

কিন্তু ব্যবহার করে সেট করা যায়নি

element.style.backgroundImage="some base64 data"

জ্যাকুরি ভাল কাজ করে।