Copiar y recortar imágenes en Javascript

Estoy tratando de crear un pequeño juego 2D en Javascript/Canvas que consta de varios sprites animados. Me gustaría reducir el número de solicitudes HTTP, así que combiné cada fotograma de animación (32px por 32px) en una imagen por sprite (digamos, 192px por 128px). ¿Hay alguna forma de que pueda copiar y recortar estas imágenes del lado del cliente en varias imágenes más pequeñas? Sería muy sencillo de simplificar mi código de representación y ayudaría a reducir el tiempo de carga debido a la latencia de la red.Copiar y recortar imágenes en Javascript

Fuente

2010-11-17 Nick Meharry

Tenga una mirada en Pixastic, específicamente http://www.pixastic.com/lib/docs/actions/crop.

Fuente

2010-11-17 00:17:22

No había visto eso antes, lo investigaré. Gracias. –

La API Canvas de HTML5 proporciona un método llamado drawImage que le permite recortar la imagen de entrada.

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

alt text

Para más información, véase la especificación (que la imagen se toma directamente de la especificación):

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

Fuente

2010-11-17 00:19:25 mike

Eso es lo que estoy haciendo ahora. Solo estoy tratando de averiguar si hay una forma de recortar la imagen antes de dibujarla para simplificar mi código de representación. –

Si su única preocupación es simplemente el código, puede encapsular los datos de la imagen en un objeto reutilizable como este: https://gist.github.com/702799 – mike

Todavía estoy trabajando en ello, pero para darle una idea de donde estoy, aquí está la fuente: http://bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js –

Si no desea utilizar tela o tercera parte biblioteca, podría agregar la imagen a un div (con "desbordamiento: oculto") del tamaño de la versión recortada y otorgarle a la imagen márgenes izquierdo y superior negativos.
Cada uno transportará toda la imagen, pero solo mostrará una parte de ella, lo que puede, o no, afectar el rendimiento. Creo que puede que tengas que dar al elemento div una posición: relativa también para hacer feliz a IE.

alternativa usted puede asignar la imagen como fondo de la div, y especificar el backgroundPosition. Me parece recordar que esto no funcionó por algo que hice una vez, no estoy seguro de por qué. (Creo que tenía que ver con la opacidad)

Fuente

2010-11-17 00:24:10 rob

No estoy seguro de que esto sea relevante, dado que la pregunta se formuló en el contexto de la creación de un juego de JavaScript/lienzo. –

, creo que pensé que el lienzo se mencionaba porque pensó que era necesario solo para esto. Pero sí, es fácil con el lienzo copiar partes de una imagen, me pregunto por qué se necesita la biblioteca pixástica. – rob

sólo tiene que cargar la imagen en una etiqueta img con pantalla atributo de estilo configurado como oculto. A continuación, recorte la imagen en un lienzo sin pantalla, luego, escriba el lienzo sin pantalla en el lienzo principal según sea necesario.

Fuente

2012-01-25 10:50:24

Copiar y recortar imágenes en Javascript

Respuesta

Cuestiones relacionadas