Create automatic images and save it in Javascript or other

Question

Create automatic images and save it in Javascript or other

Navigation

#1 by (1 votes)

1

I wanted to know if there is any way to create automatic images in any language, either php or javascript, (or also css). The truth does not know what it would be.

Explanation: Have a template of the background image, and inside that background put a picture another image. For example: A red background, and inside that background or image put some shields of equipment.

And also if you can save a certain image once the image has been created.

Is the idea understood? This would be to not edit the photos in photoshop and upload them to the hosting and so on, with this, I would upload the shields and the background, and the rest would be the code.

javascript php css imagen

asked by MatiPHP 24.07.2018 в 23:29

source

1 answer

How to add data from html table to textbox or textarea Help with data management in Oracle, how to use the TO_CHAR for a NUMBER data type?

score 1 · Accepted Answer

The most practical way to achieve what you propose is to use images png with transparent background, at the time of showing them you can use them in a <div> or directly in a <img> and simply change the background color with css .

You can read more about the image background property in the w3schools

Example putting the images as background of a 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>

Example showing images directly

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

As you will see both results are similar, but they would adapt according to what you need