2009-12-03 12 views
16

Mi amigo y yo tenemos planeado construir una tienda web. Una de las características principales de la tienda es la capacidad del cliente para diseñar sus propias cosas. Mi amigo tomó polyvore website como un ejemplo.Javascript image editor library

El enlace de arriba apunta a una página de editor. En polyvore, el cliente puede arrastrar y soltar elementos desde el lado derecho a un 'lienzo' en el lado izquierdo de la página. la imagen tiene un controlador simple para cambiar el tamaño, rotar y mover.

Esta es la característica principal que queremos lograr. Quiero saber si hay alguna biblioteca de JavaScript gratuita que ofrezca estas funciones. No necesitamos productos avanzados, porque el objetivo no es hacer algo como la aplicación en línea de Photoshop. El editor de polyvore tiene la mayoría de las funciones que necesitamos.

+0

FYI, prefiero usar jQuery y jQuery-UI. Pero no cierra la posibilidad de otro marco, si la biblioteca solo para ese marco. Todavía estoy esperando por más respuestas, mientras sigo buscando. También podría considerar hacer una, tal vez usando lienzos, así que si tienes un buen enlace de tutorial, no dudes en compartirlo aquí, votaré el buen tutorial. Gracias –

+0

¿Has tenido algún éxito? Me interesaría saber qué encontraste o finalmente utilizaste. Estoy desarrollando una aplicación similar y aunque me estoy inclinando por jQuery, odiaría volver a trabajar en algo que ya se ha hecho ... ¡Gracias! – TomO

+0

Hola Tom. El proyecto en sí se ha puesto en espera, por lo que no he vuelto a buscar la biblioteca. Siéntase libre de probar las bibliotecas sugeridas en las respuestas a continuación. –

Respuesta

6

Pixastic tiene un editor de imágenes Javascript simple que utiliza Canvas.

+3

Un editor de imágenes javascript muy simple y simple: http://code.google.com/p/svg-edit/ (prueba la demostración) – Kartoch

+1

http: //editor.pixastic.com usa lienzo, no es compatible con IE –

+1

el proyecto se cancela, pero Pixastic parece prometedor. Tal vez lo intente más tarde para los otros proyectos –

1

Si desarrolla su aplicación utilizando un marco basado en JavaScript con todas las características, como Cappuccino o SproutCore, este tipo de manipulación de imágenes livianas debería ser trivial para implementar.

Si quieres un poco más de flexibilidad en la aplicación web, ir con una biblioteca pequeña como jQuery UI o Interface Elements (que es una lista muy incompleta - hay un montón de bibliotecas similares en todo).

0

Esto no será una respuesta completa, pero debe guiarlo. Ext-js tiene un objeto llamado Ext.Resizable, http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable, puede aplicarlo a cualquier nodo y agregará controladores para redimensionarlo. Esto no está presente en su distribución central (jsquery-like), necesita la distribución completa.

La rotación de las imágenes es bastante más complicada ya que no es compatible con todos los navegadores (webkit permite la rotación a través de css). Lo que sugiero es que use una biblioteca de lienzo de navegador cruzado, como http://me.eae.net/projects/iecanvas/demo.html, que le permite rotar las imágenes que se dibujan en el lienzo. Sin embargo, no puedes combinar realmente los dos que he mencionado, te sugiero que los mires a los dos para inspirarte y lanzar el tuyo (a menos que alguien encuentre una herramienta que ya lo haga)