Блог

Главная - Вопросы по программированию - Как создать новое временное изображение, используя html, css и javascript?

Как создать новое временное изображение, используя html, css и javascript?

#javascript #css #html

#javascript #css #HTML

Вопрос:

Здесь у меня есть фон, на который я хочу добавить некоторый динамический текст для каждого отдельного пользователя .. например .. изображение bg.jpg на html-странице и входные данные, которые принимают значение от пользователей, скажем user1 , user2 .. и т.д. Мне нужно каждый раз генерировать новое изображение, состоящее из (указанного фона и имени пользователя над ним), чтобы использовать его позже, чтобы пользователь мог поделиться результатом на Facebook с помощью og: image в data-image атрибуте: <a href="someurl.com/some-article" data-image="article-1.jpg" data-title="Article Title" data-desc="Some description for this article" class="btnShare">Share</a>

Я установил пользовательский ввод в переменной js, затем передал его в div с идентификатором, расположенным по центру фона изображения, следующим образом:

HTML:

 <div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div id="centered-user"></div>
</div>

CSS:

 /* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
#centered-user {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

JS:

 var user = document.form.username.value.toUpperCase();
var x = document.getElementById("myDIV");
x.innerHTML = user;

Теперь, когда над изображением в центре есть текст, как я могу передать полученное новое изображение в атрибут html data-image ?

Ответ №1:

Вы могли бы сгенерировать SVG «на лету» и встроить его в <img> тег.

 const generateImage = text =>
  document.querySelector('#bg').innerHTML =
    `<img src="data:image/svg xml;charset=UTF-8,${encodeURIComponent(svg(text))}">`;

const svg = text => `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="960px" height="590px"
  viewBox="0 0  960 590" preserveAspectRatio="xMidYMid meet">
  <defs id="svgEditorDefs">
    <symbol id="1f60e" viewBox="0 0 64 64" preserveAspectRatio="xMidYMid meet">
      <rect x="0" y="0" width="64" height="64" style="stroke:none;fill:none;" />
      <g xmlns="http://www.w3.org/2000/svg">
        <g fill-rule="evenodd">
          <path d="M32,2c16.568,0,30,13.432,30,30S48.567,62,32,62   C15.431,62,2,48.568,2,32S15.431,2,32,2"
            fill="#ffdd67" />
          <path
            d="m36.12 21.983c-2.355 1.177-5.89 1.177-8.247 0-2.517-1.292-5.593-2.119-9.274-2.442-3.595-.314-11.215-.304-15.03 1.039-.437.153-.869.352-1.283.564-.234.119-.281.207-.281.646v.565c0 1.063-.133.649.626 1.094 1.479.865 2.32 3.116 2.771 6.214.641 4.515 2.857 7.343 6.453 8.694 3.338 1.254 7.07 1.21 10.383-.112 1.811-.724 3.402-1.867 4.666-3.724 2.215-3.257 1.551-5.289 2.695-8.09.996-2.441 3.794-2.441 4.792 0 1.143 2.798.479 4.83 2.695 8.09 1.262 1.856 2.854 3 4.665 3.724 3.311 1.322 7.05 1.366 10.384.112 3.596-1.352 5.812-4.18 6.453-8.694.449-3.098 1.291-5.349 2.77-6.214.76-.444.627-.03.627-1.094v-.565c0-.438-.047-.526-.281-.646-.414-.213-.846-.411-1.283-.564-3.813-1.343-11.434-1.354-15.03-1.039-3.683.323-6.759 1.15-9.276 2.442"
            fill="#262626" />
        </g>
        <path
          d="m21.462 43.09c1.133 1.779 2.712 3.071 4.548 3.956 1.831.886 3.908 1.326 5.991 1.328 2.081-.007 4.156-.445 5.986-1.331 1.834-.886 3.414-2.176 4.549-3.953.246 2.078-.826 4.341-2.82 5.944-1.974 1.626-4.844 2.58-7.716 2.567-2.871.008-5.738-.944-7.713-2.57-1.991-1.602-3.066-3.863-2.825-5.941"
          fill="#664e27" />
      </g>
    </symbol>
    <polygon id="svgEditorShapeDefs"
      style="fill:khaki;stroke:black;vector-effect:non-scaling-stroke;stroke-width:1px;" />
  </defs>
  <rect id="svgEditorBackground" x="0" y="0" width="960" height="590" style="fill: none; stroke: none;" />
  <use xlink:href="#1f60e" x="292" y="249" width="179" height="179" id="e5_emoji" />
  <path
    d="M9.778,96h22.222v43.962710649591656l32,-43.962710649591656h54.22200000000001c5.400000000000006,0,9.777999999999992,-4.378,9.777999999999992,-9.778000000000006v-76.445c0,-5.4,-4.378,-9.778,-9.778000000000006,-9.778h-108.445c-5.4,0,-9.778,4.378,-9.778,9.778v76.445c0,5.400000000000006,4.378,9.778000000000006,9.778,9.778000000000006Z"
    style="fill:none; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;" id="e6_shape"
    transform="matrix(1.56655 0 0 0.835931 423.742 142.001)" /><text
    style="fill:black;font-family:Arial;font-size:20px;" x="446" y="167" id="e11_texte"
    transform="matrix(1 0 0 1 32 21)">${text}</text>
</svg>
`;  
 #bg img {position: absolute; top: -100px; left: -200px;}  
 <input type="text" placeholder="Some text..." oninput="generateImage(this.value)">

<div id="bg"></div>

Комментарии:

1. Есть ли способ создать его, отличный от svg? svg делает его уродливым векторным изображением.

Ответ №2:

 var h1 = document.getElementsByTagName("H1")[0]; // Get your element
var att = document.createAttribute("class"); // Create at attribute
att.value = "democlass"; // Set value to the attribute
h1.setAttributeNode(att);