Crear una marca de agua
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.