|

Close Pixelate: pixela imágenes con HTML5

ByLuis

Close Pixelate es un script que convierte una imagen en su correspondiente pixelada haciendo uso de HTML5 y canvas. Se le pueden indicar las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha

Su uso es tan sencillo como ejecutar lo siguiente:

var docReady = function() {
  document.getElementById('portrait-image').closePixelate([
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  ]);
};
window.addEventListener( 'DOMContentLoaded', docReady, false);

Close Pixelate

Vía / WebAppers

Redimensionado óptimo de imágenes con PHP

ByLuis

Redimensionar imágenes con PHP es algo de lo que se ha hablado mucho, y no voy a contar nada nuevo, pero el tutorial que enlazo me parece bastante bueno y sencillo y nos puede ahorrar el crear los métodos nosotros mismos, porque no suele ser tan sencillo como hacer un resize, sino que a veces es necesario ajustar a un tamaño en particular y si son de diferentes aspect ratio pues entonces hay que pensar si dejar espacio neutro en los laterales o arriba/abajo.

Lo único que no me gusta es que para abrir la imagen se fija en la extensión del fichero, cuando puede usarse otro método y así podremos abrir la imagen que sea, por ejemplo desde una URL.

Image Resizing Made Easy with PHP

Preview de imágenes en enlaces con jQuery

ByLuis

Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).

imagepreview.png

$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});

New jQuery plugin: ‘imgPreview’

| | | |

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

ByLuis

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
crop.png
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Read More “Laboratorio: Recorta imágenes dinámicamente con PHP y HTML”