Создание автоматических изображений и сохранение их в Javascript или другом

Question

Создание автоматических изображений и сохранение их в Javascript или другом

я хотел знать, есть ли способ создания автоматических изображений на каком-либо языке, будь то php или javascript (или css). Правда, я не знаю, с чем это будет.

объяснение: есть шаблон фонового изображения, и внутри этого фона положить изображение другое изображение. Например: красный фон, и внутри этого фона или изображения поставить несколько командных щитов.

а также если определенное изображение может быть сохранено после создания Изображение.

вы поняли идею? Это было бы для того, чтобы не редактировать фотографии в photoshop и не загружать их на хостинг и т. д., с этим я бы загрузил щиты и фон, а остальное было бы кодом.

1

php javascript css imagen

Author: MatiPHP, 2018-07-24

Source

1 answers

score 1 · Accepted Answer

Самый практичный способ достичь того, что вы намереваетесь, - использовать изображения png с прозрачным фоном, при их отображении вы можете использовать их в <div> или непосредственно в <img> и просто изменить цвет фона с помощью css.

вы можете узнать больше о свойстве фона изображения в w3schools

Пример установки изображений в качестве фона div

#barcelona-rojo {
    background: url("https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es");
    height: 200px;
    width: 200px;
    background-color: red;
    background-repeat: no-repeat;
    background-size: cover;
}

#barcelona-gris {
    background: url("https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es");
    height: 200px;
    width: 200px;
    background-color: gray;
    background-repeat: no-repeat;
    background-size: cover;
}

#realmadrid-gold {
    background: url("https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831");
    height: 200px;
    width: 200px;
    background-color: gold;
    background-repeat: no-repeat;
    background-size: cover;
}

#realmadrid-black {
    background: url("https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831");
    height: 200px;
    width: 200px;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>Barcelona con fondo rojo</h4>
<div id="barcelona-rojo"></div>

<h4>Barcelona con fondo gris</h4>
<div id="barcelona-gris"></div>

<h4>Real Madrid con fondo dorado</h4>
<div id="realmadrid-gold"></div>

<h4>Real Madrid con fondo negro</h4>
<div id="realmadrid-black"></div>

</body>
</html>

Пример, показывающий изображения непосредственно

#barcelona-rojo {
    width: 200px;
    background-color: red;
}

#barcelona-gris {
    width: 200px;
    background-color: gray;
}

#realmadrid-gold {
    width: 200px;
    background-color: gold;
}

#realmadrid-black {
    width: 200px;
    background-color: black;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>Barcelona con fondo rojo</h4>
<img id="barcelona-rojo" src="https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es">

<h4>Barcelona con fondo gris</h4>
<img id="barcelona-gris" src="https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es">

<h4>Real Madrid con fondo dorado</h4>
<img id="realmadrid-gold" src="https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831">

<h4>Real Madrid con fondo negro</h4>
<img id="realmadrid-black" src="https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831">

</body>
</html>

Как вы увидите, оба результата похожи, но будут adpatate в зависимости от того, что вам нужно