Javascript-форум - Как поместить в <img> содержимое JS переменной "data:image/png;base64,iVB...

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как поместить в <img> содержимое JS переменной "data:image/png;base64,iVB... (https://javascript.ru/forum/misc/81341-kak-pomestit-v-img-soderzhimoe-js-peremennojj-data-image-png%3Bbase64-ivb.html)

Как поместить в <img> содержимое JS переменной "data:image/png;base64,iVB...

Добрый день,

скажите, пожалуйста, можно ли поместить в

<img onclick="..."  id="MyId" width=90 length=90 src="pic_m1" title="My Title" />

картинку, которую я предварительно сгенерил в JS и сохранил в

var pic_m1="data:image/png;base64,iVBO...

Как я понимаю, постфактум

document.getElementById('MyId').src=pic_m1;

я сделать могу, но можно ли сразу в <img> и, если да, то как, пожалуйста, подскажите?

Спасибо!

Цитата:

Сообщение от Was-Ja

но можно ли сразу в <img>

???

возможно не понятно объяснил...

Я генерю кусок html в JS, который втыкаю в innerHTML какого-то div, кусок этого html содержит множество

<img ...>

а картинки уже лежат в переменных в JS (не на сервере, а в морде у пользователя в JS!!!). Хотелось бы сразу писать какое-то магическое

<img src=my_pic_in_js />

и потом это все втыкать в innerHTML.

Was-Ja,
:-?

`<img src=${my_pic_in_js} />`

Цитата:

Сообщение от рони (Сообщение 530685)

<img src=${my_pic_in_js} />

спасибо за ответ! Не, у меня почему-то не работает, пожалуйста, помогите разобраться почему, первые две картинки у меня встроены, как Вы посоветовали, а вторые две - с сайта качаются. Мне как раз надо, чтобы первые две подставлялись.

Ссылка тут: https://elegant-nmr.com/iii/m.html

Спасибо!

Цитата:

Сообщение от Was-Ja

и потом это все втыкать в innerHTML.

где этот код?

Was-Ja,

div.innerHTML = `<img src=${my_pic_in_js} />`

Was-Ja,

document.addEventListener( "DOMContentLoaded" , function() {
dMain.innerHTML = `<img  width=90 length=90 src="${pic_m1}" />
<img  width=90 length=90 src="${pic_m2}" /> <br>
<img  width=90 length=90 src=imgs/m1.png />
<img  width=90 length=90 src=imgs/m2.png />`;
 });

Цитата:

Сообщение от рони (Сообщение 530700)

где этот код?

в конце файла, http://www.elegant-nmr.com/iii/mm.html То есть и с innerHTML и на прямую не работает.

черт!!! Кавычки!!!

Спасибо большое!!! Теперь работает!!!

Пожалуйста, а можно еще спросить на схожую тему...

Хочу поместить в виде фоновой картинки (background-image) такую картинку, которая лежит в JS переменной.

В виде ссылки получается:

document.getElementById("canvas1").style.backgroundImage="url('imgs/m3.png')";

а с переменной - нет:

document.getElementById("canvas2").style.backgroundImage="${pic_m3}";

Обратные кавычки вместо двойных тоже пробовал - не помогает. Пример лежит по адресу: http://www.elegant-nmr.com/iii/m.html

Пожалуйста, подскажите, какие теперь я кавычки и где забыл?

Спасибо!

Was-Ja,

document.getElementById("canvas2").style.backgroundImage=`url('${pic_m3}')`;

Ой!!! Как просто-то!!!

СПАСИБО ОГРОМНОЕ!!!

И еще на эту тему, пожалуйста, посоветуйте:

в html у меня куча простых групп полей:
короткое название - подсказка - input для ввода,
я обычно их помещаю в элемент таблицы, получается так:

<td>Experiment Name:</td><td><img width=15 length=15 id="h3" title="It is good idea to provide a name of an experiment here, it will simplify your further search"/></td>
<td><input type="text" class="css_mf" style="width:260px" id="experiment_name" placeholder="My first experiment today"></td>

мне хочется все тексты вынести в какую-то структуру, то есть например

var H = {};
H.DS = {}; // DS - аббревиатура секции
H.DS.EN = {}; // EN - аббревиатура конкретного поля
H.DS.EN.L = "Experiment Name";
H.DS.EN.H = "It is good idea to provide a name of an experiment here, it will simplify your further search";
H.DS.EN.PH = "My first experiment today";

Мне это хочется сделать, чтобы меняя H можно было бы изменить язык.

Я понимаю как в JS заполнить эти поля после того, как все объекты уже появились в html, но тогда код будет нечитаемый.

Скажите, пожалуйста, а можно ли как-то так написать, чтобы встроить каждый такой текстовый элемент (лежащий в JS объекте) в httml, то есть хочется чего-то похожего на:

<td>${H.DS.EN.L}</td><td><img width=15 length=15 id="h3" title=${H.DS.EN.H}/></td>
<td><input type="text" class="css_mf" style="width:260px" id="experiment_name" placeholder=${H.DS.EN.PH}></td>

Спасибо!

Цитата:

Сообщение от Was-Ja

можно было бы изменить язык.

на всякий случай ... https://javascript.ru/forum/showthre...076#post509074

Спасибо большое!!! Пока забил, и реализовал через innerHTML и аналогичное

Вопрос вдогонку...

Скажите, пожалуйста, а как поместить картинку, которая есть в JS переменной внутрь css?

То есть у меня есть

<script>
var pic_b = [];
pic_b[0]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB6CAYAAAClS5OpAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUaN7t2rENwDAIAEFIw8heHolMYKqku5foELcAOTNxq7uju2MrM6Oq7gszc51zTkTEbFNVs9144ucAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODfcnvs/qIXQqxBMul12GcAAAAASUVORK5CYII=";
</script>

и есть CSS:

</style>
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
/* .css_l:focus { outline: none; } */
.css_l::before { content: attr(name); }
.css_l[value='0']::after { content: `url('${pic_p[0]}')`; margin: 1px; } /*  мне хочется сюда нарисовать картинку, что я выше сохранил в JS переменной */
.css_l[value='1']::after { margin: 2px; }
.css_l[value='2']::after { margin: 6px; }
</style>

Поправьте, пожалуйста, что я тут делаю не так!

Спасибо!

Как то так

<style id='ist'>
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
/* .css_l:focus { outline: none; } */
.css_l::before { content: attr(name); }
.css_l[value='0']::after { content: `url('${pic_p[0]}')`; margin: 1px; } /*  мне хочется сюда нарисовать картинку, что я выше сохранил в JS переменной */
.css_l[value='1']::after { margin: 2px; }
.css_l[value='2']::after { margin: 6px; }
</style>

var pic_b = [];
pic_b[0]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB6CAYAAAClS5OpAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUaN7t2rENwDAIAEFIw8heHolMYKqku5foELcAOTNxq7uju2MrM6Oq7gszc51zTkTEbFNVs9144ucAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODfcnvs/qIXQqxBMul12GcAAAAASUVORK5CYII=";

let est = document.getElementById('ist'); // Элемент style
let rules = est.sheet.cssRules; // Список правил
let rule;
for (let i = 0; i<rules.length; i++) {			// Ищем правило с нужным селектором
	if (rules[i].selectorText == ".css_l[value='0']::after") {
		rule = rules[i]; break;
	}
}
rule.style.setProperty('content', `url('${pic_p[0]}')`);  //  Задаем нужное свойство

Огромное спасибо, voraa за классное решение!!!

Не думал, что придется так заумно в css заехать, заодно теперь я понимаю, что с css можно делать все, что и с обычными элементами.

Дополнительно обнаружил, что

if (rules[i].selectorText == ".css_l[value='0']::after")

не во всех браузерах работает, но

if (rules[i].selectorText == ".css_l[value=\"0\"]::after")

работает вроде везде.

Еще есть одна хотелка, думал сам осилю, но так пока и не смог... Теперь хочется эту картинку уменьшить - отскалировать. Пробовал добавить

rule.style.setProperty('width', "20%");

но ничего не изменилось.

Пожалуйста, посоветуйте, можно ли как-то встраиваемую картинку отскалировать (она у меня 122 пикселей в высоту, а хочется, например, 24 пикселя или 20%).

Спасибо!

Цитата:

Сообщение от voraa

for (let i = 0; i<rules.length; i++) {           // Ищем правило с нужным селектором
    if (rules[i].selectorText == ".css_l[value='0']::after") {
        rule = rules[i]; break;
    }
}

в общем виде, рули могут быть медиазапросами, тогда у них нет selectorText, зато есть свой массив cssRules, по которому тоже надо цикл

function findRuleBySel (rules, selectorText) {
  if (!rules || !selectorText) return;
  
  for (let i = 0; i<rules.length; i++) 
    const rule = findRuleBySel(rules[i].cssRules, selectorText) || ((rules[i].selectorText === selectorText) && rules[i]);
    if (rule) {
      return rule;
    }
  }
}

Спасибо большое, Alexandroppolus, за ответ,

я тормоз, и так и не смог вытащить правильный руль.

Итак, имею:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css" id="my_style_id">
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
.css_l::before { content: attr(name); }
.css_l[value="0"]::after { margin: 6px; }
.css_l[value="1"]::after { margin: 1px; }
.css_l[value="2"]::after { margin: 1px; }
</style>

</head>

<body bgproperties=fixed>

<div id="my_div"> </div>

<script>
var pic_b = [];

pic_b[3]="data:image/png;base64,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";

pic_b[4]="data:image/png;base64,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";

function findRuleBySel(rules, selectorText)
{ if(!rules || !selectorText) return;
  for(let i = 0; i<rules.length; i++)
  { const rule = findRuleBySel(rules[i].cssRules, selectorText) || ((rules[i].selectorText === selectorText) && rules[i]);
    if(rule) return rule;
  }
}

function ID(id) { return document.getElementById(id); }


function MainMenuInit()
{ // подкрутим картинки в css
  let est = ID('my_style_id'); // Элемент style
  let rules = est.sheet.cssRules; // Список правил
  for (let i = 0; i<rules.length; i++) // печатаем на всякий случай все правила
    console.log("[" + i + "]: " + rules[i].selectorText + " : " + rules[i].cssRules);
  let rule;
  rule=findRuleBySel(rules, ".css_l[value=\"1\"]::after"); // ищем правило с нужным селектором
  rule.style.setProperty('content', `url('${pic_b[3]}')`); // засовываем туда картинку
  console.log("1: " + rules + " : " + rule);
  console.log(CSSStyleRule);
  for (let i = 0; i<rule.length; i++) // не понимаю где искать размер, ищу, где могу, но не получается
    console.log("[" + i + "]: " + rule[i].selectorText);
//  rule=findRuleBySel(rule, "width"); // и тут искал
//  console.log("2: " + rule);
//  rule.setProperty("width", "20%");

  rule=findRuleBySel(rules, ".css_l[value=\"2\"]::after"); // все то же самое для второй картинки
  rule.style.setProperty('content', `url('${pic_b[4]}')`);
//
// теперь создаем кнопку с этим стилем
  let par = document.createElement("button");
  par.innerHTML="CH<sub>3</sub>-";
  par.className="css_l";
  par.value=1;
  par.id="rd";
  par.title="CH<sub>3</sub>-";
  ID("my_div").appendChild(par);
  ID("rd").addEventListener('click', RadicalsOnClick);
}

var RDVal=1;

function RadicalsOnClick() { ID("rd").value = RDVal = (RDVal+1)%3; }

MainMenuInit();

</script>
</body></html>

здесь полный пример, где, по совету voraa я вставляю картинки, но, потом безуспешно пытаюсь поменять их размер.

Помогите, пожалуйста, найти правильный руль размера картинки!

Спасибо!

Изменить размер картинки, вставленной через content нельзя
Можно вставить псевдоэлемент after как блок и задать ему картинку, как background.
Размеры лучше указывать непосредственно в пикселях, т.к. при указании в % эти % берутся не от размера картинки, а от размеров родительского блока.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<style type="text/css" id="my_style_id">
.css_l { 
	border-radius: 14px; 
	border: 2px solid black; 
	color: black; 
	padding: 2px 2px; 
	font-size: 14px; margin: 5px 5px; 
	cursor: pointer; 
}
.css_l::before { content: attr(name); }

.css_l[value="0"]::after { margin: 6px; }

.css_l[value="1"]::after { 
    display: inline-block;
    background-size: 24px 24px;
    width: 24px; 
   height: 24px;
   position: relative;
	margin: 1px;
	content: ''; 
	vertical-align: middle; 
}
.css_l[value="2"]::after { margin: 1px; }
</style>
 
</head>
 
<body bgproperties=fixed>
 
<div id="my_div"> </div>
 
<script>
var pic_b = [];
 
pic_b[3]="data:image/png;base64,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";
 
 
function findRuleBySel(rules, selectorText)
{ if(!rules || !selectorText) return;
  for(let i = 0; i<rules.length; i++)
  { const rule = findRuleBySel(rules[i].cssRules, selectorText) || ((rules[i].selectorText === selectorText) && rules[i]);
    if(rule) return rule;
  }
}
 
function ID(id) { return document.getElementById(id); }
 
 
function MainMenuInit()
{ // подкрутим картинки в css
  let est = ID('my_style_id'); // Элемент style
  let rules = est.sheet.cssRules; // Список правил
  for (let i = 0; i<rules.length; i++) // печатаем на всякий случай все правила
    console.log("[" + i + "]: " + rules[i].selectorText + " : " + rules[i].cssRules);
  let rule;
  rule=findRuleBySel(rules, ".css_l[value=\"1\"]::after"); // ищем правило с нужным селектором
  rule.style.setProperty('background-image', `url('${pic_b[3]}')`); // засовываем туда картинку
  console.log("1: " + rules + " : " + rule);
  console.log(CSSStyleRule);
  for (let i = 0; i<rule.length; i++) // не понимаю где искать размер, ищу, где могу, но не получается
    console.log("[" + i + "]: " + rule[i].selectorText);
//  rule=findRuleBySel(rule, "width"); // и тут искал
//  console.log("2: " + rule);
 
//
// теперь создаем кнопку с этим стилем
  let par = document.createElement("button");
  par.innerHTML="CH<sub>3</sub>-";
  par.className="css_l";
  par.value=1;
  par.id="rd";
  par.title="CH<sub>3</sub>-";
  ID("my_div").appendChild(par);
  ID("rd").addEventListener('click', RadicalsOnClick);
}
 
var RDVal=1;
 
function RadicalsOnClick() { ID("rd").value = RDVal = (RDVal+1)%3; }
 
MainMenuInit();
 
</script>
</body></html>

Спасибо большое, voraa,

все заработало именно как мне и хотелось, многое благодаря Вам узнал про CSS, СПАСИБО БОЛЬШОЕ!!!