Last active
August 5, 2018 20:29
-
-
Save brpereyra/51d214ac88c1f86079ebafc00710eb42 to your computer and use it in GitHub Desktop.
Crear imagen desde javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<style> | |
*{ | |
font-family: calibri; | |
margin: 0; | |
padding: 0; | |
font-size: 18px; | |
} | |
label{ | |
display: block; | |
} | |
.mx-auto{ | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.col-25{ | |
width: calc(1280px / 4); | |
} | |
.col-50{ | |
width: calc(1280px / 2); | |
} | |
.col-100{ | |
width: 1280px; | |
} | |
.row{ | |
display: block; | |
width: 100%; | |
} | |
.t-center{ | |
text-align: center; | |
} | |
#selector label{ | |
display: flex; | |
justify-content: center; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="selector" class="mx-auto col-25"> | |
<p class="label">Color del texto</p> | |
<label for="textColor"> | |
<input type="color" id="textColor" value="#ffffff"> | |
</label> | |
<p class="label">Color primario</p> | |
<label for="pColor"> | |
<input type="color" id="pColor" value="#21fe23"> | |
</label> | |
<p class="label">Color secundario</p> | |
<label for="sColor"> | |
<input type="color" id="sColor"> | |
</label> | |
<p class="label">nombre de la imagen</p> | |
<label for="name"> | |
<input type="text" id="name"> | |
</label> | |
<p class="label">Texto de la imagen</p> | |
<label for="texto"> | |
<input type="text" id="texto"> | |
</label> | |
<a id="descarga" > | |
<button class="row" id="descargar">Descargar</button> | |
</a> | |
</div> | |
<script> | |
var qs=string=>{return document.querySelector(string)} | |
qs("#descargar").addEventListener("click",e=>{ | |
var canvas=document.createElement("canvas") | |
canvas.width=1280; | |
canvas.height=720; | |
var context=canvas.getContext("2d"); | |
context.rect(0, 0, canvas.width, canvas.height); | |
var x = canvas.width / 2; | |
var y = canvas.height / 2; | |
var grd = context.createLinearGradient(0, 0, canvas.width , canvas.height); | |
grd.addColorStop(0, qs("#pColor").value); | |
grd.addColorStop(1, qs("#sColor").value); | |
context.fillStyle = grd; | |
context.fillRect(0, 0, canvas.width , canvas.height); | |
context.font = '50px Calibri'; | |
context.textAlign = 'center'; | |
context.fillStyle = qs("#textColor").value; | |
context.fillText(qs("#texto").value, x, y); | |
var descarga=qs("#descarga") | |
descarga.download=qs("#name").value+".jpeg"; | |
descarga.href=canvas.toDataURL('image/jpeg', 1.0) | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment