Skip to content

Instantly share code, notes, and snippets.

@brpereyra

brpereyra/index.html

Last active August 5, 2018 20:30
Show Gist options
  • Save brpereyra/0a29def67e924d584d95aaeb1a3b8a8d to your computer and use it in GitHub Desktop.
Save brpereyra/0a29def67e924d584d95aaeb1a3b8a8d to your computer and use it in GitHub Desktop.
Download ZIP
Generate image or make from canvas
Raw
index.html
<!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