4

Estamos realizando un proyecto de certificado de sitio seguro pero se no has planteado unos problemas.

La idea es poder generar un código algo similar a google adsense que genera un código la única diferencia es que es de publicidad.

El código generado deseado es mostrar una imagen de sitio verificado pero que muestre la fecha actual.

Algo similar a esto: introducir la descripción de la imagen aquí

La imagen en generar el código y mostrar la fecha es esta:

introducir la descripción de la imagen aquí

¿Ahora mi pregunta es como generar el código con la imagen y la fecha actual?

Javascript o jQuery

Hasta ahora solo he conseguido mostrar la fecha y darle algo de estilo

Con los estilos css podría implementar fácilmente la imagen, el problema es que tocaría obligar a utilizar los estilos css y esa no es la idea la idea es generar el código del certificado de la imagen algo similar a google adsense se muestre tomando datos del servidor. Toca aclarar que en el certificado tendrá un enlace con los datos del cliente que esta verificado.

var f=new Date();
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
document.write('<div class="mifecha">');
document.write('<div class="ano">' + f.getFullYear() + '</div>');
document.write('<div class="dia">' + f.getDate() + '</div>');
document.write('<div class="mes">' + meses[f.getMonth()] + '</div>');
document.write('</div>');
.mifecha {
	background-color: #999;
	padding: 3px;
	width: 110px;
	text-align: center;
	font-family:verdana, arial;
	font-size: 12pt;
}
.mifecha .ano{
	background-color: #339;
	padding: 2px;
	font-size: 100%;
	margin-bottom: 3px;
	color: #fff;
	letter-spacing: 3px;
	font-weight: bold;
}
.mifecha .dia{
	background-color: #99f;
	font-size: 300%;
	padding: 5px 8px;
	margin-bottom: 3px;
	font-weight: bold;
}
.mifecha .mes{
	background-color: #339;
	font-size: 80%;
	padding: 2px;
	color: #fff;
	font-weight: bold;
}

.mifecha2 {
	border: 1px solid #ddd;
	padding: 3px;
	text-align: center;
	font-family:verdana, arial;
	font-size: 10pt;
	overflow: hidden;
	width: 100%
}
.mifecha2 .mesano{
	float: left;
	padding: 3px;
	font-weight: bold;
}
.mifecha2 .dia, .mifecha2 .diaactual{
	width: 20px;
	padding: 3px;
	margin-left: 3px;
	background-color: #ddd;
	float: left;
}
.mifecha2 .diaactual{
	background-color: #999;
	font-weight: bold;
}

2
  • ¿y que es lo que has intentado?
    – rfrp
    el 15 nov. 2016 a las 19:55
  • 1
    @rfrp he editado mi pregunta amigo.
    – Otto
    el 15 nov. 2016 a las 21:06

2 respuestas 2

2

Al principio cuando leí tu pregunta, pensé que no se podía. Busqué y encontré esta libreria. Podrías darle un vistazo y comentar como la usaste.

Por otro lado, ten en cuenta que lo que vas a hacer, es que con "una imagen" generada por el cliente certificar un sistema. Según yo, la lógica debiera ser que esta es generada en un servidor, donde quien recibe la certificación no pueda intervenir.

0

Se me ocurre que podiras usar canvas

La compatibilidad con navegadores es IE9+

Si lo anterior no es un problema, entonces puedes hacer lo siguiente:

var canvas = document.getElementById("canvas");
var width = parseInt(canvas.getAttribute('width'), 10);
var height = parseInt(canvas.getAttribute('height'), 10);
var ctx = canvas.getContext("2d");


// Agregamos la imagen de fondo
var image = document.getElementById("image");
ctx.drawImage(image, 0, 0, width, height, 0, 0, width, height);

// Agregamos la fecha
var monthNames = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
var date = new Date();
var text = date.getDate() + "-" + monthNames[date.getMonth() - 1];
ctx.font = '25px bold arial';
ctx.textAlign = 'left';

var textSize = ctx.measureText(text);
ctx.fillText(text, width - textSize.width, height);
<!-- El tamaño del canvas es exactamente el de la imagen -->
<canvas id="canvas" width="225" height="150"></canvas>
<div style="display:none;">
  <img id="image" src="https://i.stack.imgur.com/S4mrw.png">
</div>

Explicación del snippet:

  • Al iniciar buscamos el canvas y obtenemos sus dimensiones y contexto.
  • Luego dibujamos la image con la ayuda del metodo drawImage
  • Por ultimo generamos la fecha, dandole formato primero, luego obtenemos el ancho con la ayuda de measureText y la agregamos con fillText posicionandola abajo a la derecha.

Nota: El tamaño del canvas es exactamente igual al tamaño de la imagen. Esto lo hice así, para evitar hacer calculos de posicionamiento.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.