Borchani.COM – Blog

Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas /> que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.

Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.

var img = document.getElement("myImage"); // get the image element

if (img.complete) {	// make sure the image is fully loaded
	Pixastic.process(
		img,
		"brightness",	// brightness/contrast adjustment

		{		// options object

			"brightness" : 60,	// set brightness option value to 60
			"contrast" : 0.5,	// set contrast option value to 0.5,
			"rect" : {		// apply the effect to this region only
				"left" : 100,
				"right" : 100,
				"width" : 200,
				"height" : 150
			}
		}
	)
}

}

Documentación / Descargar

Photo Notes es una librería JavaScript que nos permite agregar pequeñas notas a nuestras imágenes al estilo Flickr, pero lo mejor es que nos permite visualizar en tiempo real, actualizar, y manipular nuestras notas online.

Ver  – Descarga Completa Version Oficial – Ver demo oficial

PLAIN TEXT

Estructura

Boton agregar texto

Nuestra imagen y nuestro script

Via ajaxian descubro Instant.js 1.0 un script que nos permite agregar un efecto polaroid de forma fácil y rápida (una buena forma de evitar tener que editarlas). Funciona muy bien con todos los navegadores “importantes” – Mozilla Firefox 1.5+, ópera 9+ y safari. Pero en IE viejos no se vera ninguna modificación, lo que nos es problema ya que los usuarios no notaran ninguna diferencia, simplemente verán la imagen e forma normal.

Para comenzar a utilizarlo necesitamos descargar nuestra librería , subirla a nuestro hosting y llamarlo desde nuestro sitio, para ello copiaremos el siguiente código antes de nuestra etiqueta < /HEAD >

Ahora a las imágenes que deseamos darle este efecto le agregamos la clase “instant”. Ej:

Ejemplo:

Después de nuestra clase “instant” podemos agregar otros parámetros para personalizar o modificar el efecto, por ejemplo cambiar la inclinación, dar más opacidad en la sombra, etc.

Los parámetros que podemos agregar después de la clase instant son:

Dar opacidad a Sombra: El parametro “ishadow55” , nos sirve para modificar la opacidad de nuestra sombra, como vemos ishadow esta seguido por un numero este podrá varias entre 0 y 100 aunque si optamos por introducir únicamente la clase “instant” sin ningún parámetro, nuestra imagen tendrá una opacidad en su sombra de forma default de 33.

Ej codigo:

Ej Visual

Cambiar la Orientación de la imagen: luego de nuestra clase “instant” podremos agregar los siguientes parámetros que cambiaran la inclinación de la imagen, ellos son itiltright (derecha), itiltleft (izquierda), o itiltnone (ninguno)

Ej codigo:

Ej Visual

Cambiar el Color del marco de la imagen: Para cambiar el color del marco agregamos el parámetro “icolor000000”, donde “000000” corresponde a su color, en este caso 000000 = Negro, siempre el color deseado deberá ser expresado en hexadecimal.

Ej codigo:

Ej Visual

Tambien podremos agregar todos los parametros juntos:

EJ Codigo

ej Visual

Post original netzgesta

Via ajaxian