DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
07-05-2014

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery; en específico usaremos las siguientes tecnologías:

Funcionamiento de nuestro experimento de recorte de imágenes

El funcionamiento es sencillo y la podemos explicar de la siguiente manera:

Sigue el mismo procedimiento que los procesadores de imágenes como GIMP o Photoshop.

El método drawImage()

El método drawImage() permite dibujar una imagen, Canvas o video dentro de un Canvas (más información clic aquí); recibe como parámetros obligatorios:

Como vimos el el tutorial anterior: Escalado y recortando imágenes con Canvas el modo de la función varía según la cantidad de parámetros que le pasemos:

1. Variables globales e inicialización

En esta parte definiremos las variables utilizadas para la elaboración de este ejemplo; pasaré por alto su explicación ya que la funciones de las mismas son explicadas en los comentarios del código mostrado a continuación:

//*** variables globales

// canvas y su contexto
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// imagen en donde se colocará la imagen cortada
var canvasImg = document.getElementById('canvasImg');

// ruta a una imagen fuente
var imgSource = "image.jpg";

// punto X y Y del primer clic sobre el canvas
var iniX;
var iniY;

// punto X y Y del segundo clic sobre el canvas
var endX;
var endY;

// anchura y altura calculada a partir del primer y segundo clic
var imgW;
var imgH;

// hover que se surperpondran sobre el canvas segun la seleccion del usuario
var hover = document.getElementById('hoverCut');

// inicializo los componentes para el recorte de la imagen
function init() {
	// primer clic del usuario que indica la zona que voy a a recortar
	iniX = -1;
	iniY = -1;

	// primer clic del usuario que indica la zona que voy a a recortar
	endX = -1;
	endY = -1;

	// anchura de la imagen recortada
	imgW = -1;
	imgH = -1;

	// indica si coloco el hover
	hoverBol = false;

	// div hover
	$(hover).css("width", 0);
	$(hover).css("height", 0);

}

El método init() permite inicializar las variables y deshabilitar el hover (estableciendo su anchura y altura en cero); se realizará una llamada a este método por cada recorte que realice el usuario sobre el Canvas.

2. Dibujando una imagen en el Canvas

Ahora es definido un método que permita cargar una imagen fuente a un Canvas para poder manipularlo:

// cargo el contenido del canvas hacia un tag img
function loadImageToCanvas() {
    // creo un objeto de tipo Image y se le asigna una imagen fuente
    newImg = new Image();
    newImg.src = imgSource;

    // pinto la imagen en el canvas solo si se ha terminado de cargar 
    newImg.onload = function() {
        //reescalo el canvas al tamano de la imagen
        canvas.width = newImg.width;
        canvas.height = newImg.height;
        ctx.drawImage(newImg, 0, 0);
    };
}

3. Retornando el Contenido del Canvas hacia una Tag img (imagen)

Antes pasamos el contenido de una imagen hacia el Canvas; ahora haremos lo contrario; el método permitirá cargar el contenido del Canvas hacia una imagen; también se copiará el contenido de una imagen en un Tag a para poder descargar la imagen cortada (la final o generada por la operación de corte del usuario).

    // cargo la imagen hacia el canvas
    // guardo el canvas en una imagen 
    function saveCanvasToImage() { 
        var dataURL = canvas.toDataURL(); 
        canvasImg.src = dataURL; 
        document.getElementById("downloadImage").href = dataURL;
    }

4. Evento clic en el Canvas

El siguiente paso consiste en capturar dos clic del usuario sobre el Canvas; los mismo permitirán calcular el área rectangular para recortar la imagen:

  // clic sobre el canvas
    $(canvas).click(function(e) {
        var offset = $(this).offset();

        auxX = e.clientX - offset.left + $("body").scrollLeft();
        auxY = e.clientY - offset.top + $("body").scrollTop();

        // primer clic
        if (iniX hover).css("left", e.clientX + $("body").scrollLeft());
            $(hover).css("top", e.clientY + $("body").scrollTop());

            // segundo clic
        } else {
            // segundo punto
            endX = auxX;
            endY = auxY;

            // dimenciones de la nueva imagen
            imgW = endX - iniX;
            imgH = endY - iniY;

            // guardo la imagen en un tag img
            newImg = new Image();
            newImg.src = imgSource;

	    // cuando terminde de cargar la imagen
            newImg.onload = function() {
                // limpio el canvas (para que el corte sea limpio)
                ctx.clearRect(0, 0, newImg.width, newImg.height);

                // reescalo el canvas para que quede solo la img y ningun espacio en blanco
                canvas.width = imgW;
                canvas.height = imgH;

                // corto la imagen
                ctx.drawImage(this, iniX, iniY, imgW, imgH, 0, 0, imgW, imgH);

                // guardo el corte en una imagen
                saveCanvasToImage();
                // cargo de nuevo la imagen en el canvas
                loadImageToCanvas();

		// limpio la seleccion y los clic
                init();
            };
        }
    });

Analizando la función anterior...

Si nos fijamos, el cuerpo de la función manejada por el evento clic sobre el Canvas esta dividida en dos bloques; usamos la variable iniX como bandera para saber si se trata del primer clic (primer bloque encerrado por el if()) o el segundo (segundo bloque encerrado por el if()):

El punto primordial de esta función es la de capturar la posición de los clic del usuario; de eso se encargan este par de líneas para el eje X y Y:

auxX = e.clientX - offset.left + $("body").scrollLeft();
auxY = e.clientY - offset.top + $("body").scrollTop();

También ubicamos al hover sobre el primer clic del usuario; al tener un atributo position:absolute no es necesario emplear el método offset() ya que no posee una posición relativa, sino absoluta.

5. El hover sobre el Canvas

Ahora colocaremos un hover semi-transparente desde el primer clic del usuario hasta donde se mueva el mismo en el Canvas; para eso cambiamos repetidamente la altura y anchura del hover según el usuario se mueva por el canvas; la explicación es similar al punto 4:

    // pinto un div sobre el canvas desde el primer clic del usuario 
    // hasta donde el usuario mueva el raton
    $(canvas).mousemove(function(e) {
        // si hubo un primer clic por el usuario
        if (iniX >= 0) {
            var offset = $(this).offset();

            endX = e.clientX - offset.left + $("body").scrollLeft();
            endY = e.clientY - offset.top + $("body").scrollTop();

            imgW = endX - iniX;
            imgH = endY - iniY;

           $(hover).css("width", imgW - 3);
            $(hover).css("height", imgH - 3);
        }
    });

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Efectos hover con CSS

Efectos hover con CSS

Librería para gestos

Librería para gestos

Algunos artículos que te pueden interesar

Detectando los eventos de teclado con Canvas

Detectando los eventos de teclado con Canvas

En esta entrada veremos un pequeño experimento en donde con el Canvas mediante los eventos de teclados específicamente emplearemos las flechas de direcciones del teclado.

Andrés Cruz 07-12-2015

Selectores en JavaScript

Selectores en JavaScript

Muchas veces usamos jQuery por facilidad a la hora de seleccionar elementos del DOM, y poder trabajar con ellos. Pero, podemos acceder los mismos elementos de formas similares con puro javascript.

Andrés Cruz 27-08-2013

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017