2008-09-17 19 views
5

¿Es posible crear y modificar dinámicamente imágenes en un por nivel de píxel en JavaScript (en el lado del cliente)? ¿O tiene que hacerse con un servidor basado en un lenguaje, como PHP?Crear/modificar imágenes en JavaScript

Mi caso de uso es el siguiente:

  • El usuario abre la página web y cargas imagen almacenada localmente
  • Se muestra una vista previa de la imagen
  • El usuario puede modificar la imagen con un conjunto de controles deslizantes (operaciones a nivel de píxel)
  • al final se puede descargar la imagen a su disco duro local de

Durante la búsqueda de la web Acabo de encontrar publicaciones sobre el uso del método de filtrado de IE, pero no encontré nada sobre las funciones de edición de imágenes en JavaScript.

Respuesta

1

Esto tiene que ser hecho en el lado del servidor. Una cosa que podría ver es permitir que toda la edición vaya del lado del cliente, y al final, enviar la imagen final (a través de AJAX) al servidor para permitir que se la devuelva como el tipo MIME correcto y correctamente. lleno.

+0

¿Cómo funciona exactamente la edición puede hacerse en el mismo lado del cliente? – ffledgling

8

Algunos navegadores son compatibles con el lienzo: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

+0

gracias por ponerme en esto. encontró una gran cartilla en esta respuesta http://stackoverflow.com/a/6634646/1382306 su respuesta debería recibir chk –

+1

Gracias por todos los comentarios. Para resumir, parece haber soluciones para algunos navegadores (por ejemplo, Firefox). Sin embargo, una solución para todos los navegadores parece requerir una implementación del lado del servidor. – Fabian

0

Se puede imaginar un conjunto de herramientas de JS que permitirá al usuario definir qué tipo de transformación que él quiere hacer, pero el trabajo final de la transformación se debe realizar en un lado del servidor. JS en el lado del cliente no puede crear un archivo, por razones de seguridad.

0

manipulación de imágenes Local en JavaScript debe ser posible - echar un vistazo a Defender of the Favicon. ;-) La pregunta es cómo obtener la imagen original del sistema de archivos en su página (no sé de otra manera que hacer una carga HTTP en el servidor primero).

2

Es posible que desee comprobar hacia fuera Processing.js. John Resig de jQuery fama lo escribió. Admite el procesamiento de píxeles, desafortunadamente solo Firefox 3 puede manejarlo de manera suficiente.

1

También se fijan en data URIs (aunque las versiones de IE por debajo de 8 no son compatibles con ellos, por desgracia!)

Cuestiones relacionadas