En este tutorial crearemos un filtro navideño para tus fotos de perfil, con canvas y JavaScript.

¿Te gustaría personalizar una imagen de perfil con un filtro especial? Hoy aprenderemos a adjuntar un diseño a una fotografía o imagen haciendo uso de canvas y JavaScript, y luego exportaremos esta imagen para poder guardarla. Usaremos un ejemplo navideño, aprovechando estos días festivos. ¡Jo, jo, jo, comencemos!

En HTML:

Creamos un input en el cual se podrá introducir la url de una imagen, esta llevará el id de "link". Además de un evento mediante el cual cuando este cambio de valor, llamará a una función de JavaScript. 

  Link de la imagen: 

Un elemento canvas, con el id de "canvas". Este elemento tendrá la particularidad de estar oculto con la propiedad de css display.

Un elemento img con un id de "canvasImg"

Un elemento que funcionará como botón, con el id de "download", el atributo href="" vacío y finalmente el atributo download. 

  Descargar

En CSS se agregarán los estilos para centrar y dar forma a estos elementos.

En JavaScript:

Seleccionamos el elemento canvas y su contexto 2d, para almacenarlos en las variables canvas y ctx respectivamente.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Además, seleccionamos el elemento img, y lo guardamos en una variable de nombre imagen, esta será la variable a la cual se exportará la imagen con el filtro.

var imagen = document.getElementById("canvasImg");

Creamos dos variables de tipo imagen, con la particularidad de tener un atributo crossOrigin con el valor de anonymous, esto para permitir que el contenido de sitios de terceros puedan ser utilizados en nuestra página web.

Estas dos variables serán img, para la imagen a la cual se le aplicará el filtro, y filtro que será la imagen que se sobrepondrá a la imagen.

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');

var filtro = new Image();
filtro.setAttribute('crossOrigin', 'anonymous');

Agregamos la fuente del filtro que va a ser utilizado.

filtro.src = "img/filtro.png"

Cuando este elemento haya sido cargado, llamará la función actualizar.

filtro.onload = function() {
    actualizar();
}

Ahora crearemos esta función, lo primero que haremos será obtener el url escrito en el input y asignarlo como la fuente de la imágen. Además creamos una variable que almacenara la imagen exportada y la inicializamos con el valor de 0.

function actualizar() {
    img.src = document.getElementById("link").value;
    var imgTag = 0;
}

Cuando esta imagen base ha sido cargada, obtendremos algunos valores necesarios para la visualización de ambas imágenes. 

img.onload = function() {
    let long = 300;
    let ancho = img.width;
    let alto = img.height;
    let fancho = filtro.width;
    let falto = filtro.height;
}

La variable long es el tamaño máximo que tendrá la imagen ya sea de alto o ancho. Las variables de ancho y alto contendrán el tamaño original de la imagen a ser filtrada. Asimismo también serán almacenadas los tamaños originales de la imagen que servirá de filtro.

Dependiendo si es una imagen horizontal o vertical, el tamaño máximo no podrá sobrepasar los 300px en su medida mayor dejando la otra a una proporcionalidad basada en sus tamaños originales.

if (ancho < alto) {
    h = long;
    w = h * ancho / alto;
} else {
    w = long;
    h = w * alto / ancho;
}

Asignamos estos valores de "w" y "h" a las medidas del elemento canvas, así como a los de la imagen que tendrá la exportación.

canvas.width = imagen.width = w;
canvas.height = imagen.height = h;

Ahora basados en el ancho de la imagen calculamos un alto proporcional para el filtro.

let hf = w * falto / fancho;

Ahora graficamos en el elemento canvas tanto la imagen a ser filtrada como el filtro.

ctx.beginPath();
ctx.drawImage(img, 0, 0, w, h);
ctx.drawImage(filtro, 0, h - hf, w, hf);
ctx.closePath();

Exportamos todo el lienzo en una variable llamada imgTag, en los parámetros del método toDataURL se asigna el formato de imagen en el que se exporta.

var imgTag = canvas.toDataURL("image/png");

Para visualizar esta imagen, se asigna como fuente de la imagen la variable creada anteriormente.

imagen.src = imgTag;

Por último para que esta imagen pueda ser descargada, asignamos como href del link de descarga a la variable que almacena la imagen exportada.

document.getElementById("download").setAttribute("href", imgTag);

Si la imagen no ha sido cargada con éxito, se ocultara la imagen.

img.onerror = function() {
    imagen.src = imgTag;
    imagen.setAttribute('style','display: none;');
    document.getElementById("download").setAttribute("href", imgTag);
};

Aquí dejo un link de prueba: 

https://raw.githubusercontent.com/NestorPlasencia/img/master/imgejemplo.png

Si deseas aprender mucho más de JavaScript y su uso en el elemento canvas, recuerda que en DevCode tenemos un curso de API’s de HTML5. Además, actualmente tenemos una promoción especial  por navidad. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.