Crear una marca de agua

facebook-svg gplus-svg twitter-svg

A veces necesitamos poner una "marca de agua" en una imagen. Una manera de hacerlo es utilizando el canvas de HTML5. Estos son los pasos a seguir:

1. Definir una nueva imagen. Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediante document.getElementById(), por ejemplo ).

var laImagen = document.getElementById("img");

2. Establecer el tamaño del canvas en función del tamaño de la imagen utilizada

canvas.width = laImagen.width;
canvas.height = laImagen.height;

3. Dibujar la imagen en el canvas

ctx.drawImage(theImage, 0, 0);

4. Guardar el texto para la marca de agua en una variable

let texto = "marca de agua";

5. Establecer algunas características del texto

// el texto va centrado en el centro del canvas
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// el color del texto e blanco con un 50% de transparencia.
ctx.fillStyle = "rgba(255,255,255,.5)";

6. Finalmente la parte más importante: calcular el tamaño del texto (font-size) para que después de escribirlo. Al anchura total del texto sea canvas.width – 20

let tamanoTexto = 60; // empieza con algo grande, más grande de lo que sea necesario
ctx.font = tamanoTexto + "px Arial";
// mide la anchura del texto
let anchuraTexto = ctx.measureText(texto).width;
// mientras que el texto siga demasiado grande
while (anchuraTexto > canvas.width - 20) {
// disminuie el tamaño del texto
tamanoTexto--;
ctx.font = tamanoTexto + "px Georgia";
anchuraTexto = ctx.measureText(texto).width;
}
//pinta el texto en el canvas
ctx.fillText(texto, cx, cy);

En este caso el tamaño calculado del texto es de 43px.

7. Si es necesario, es posible recuperar la imagen con la marca de agua utilizando el método toDataURL

See the Pen b1a49a453efafa820219cd29dd06f699 by Gabi (@enxaneta) on CodePen.