Copie et de recadrer les images en Javascript

Je suis en train de créer un petit jeu en 2D en Javascript/Toile qui se compose de plusieurs les sprites animés. J'aimerais réduire le nombre de requêtes HTTP, donc j'ai associé chaque image de l'animation (32px par 32px) en une seule image par sprite (dire, 192px par 128px). Est-il possible que je puisse le copier et de les recadrer ces images côté client de retour en plusieurs petites images? Il serait grandement simplifier mon code de rendu et d'aider à réduire les temps de chargement en raison de la latence du réseau.

OriginalL'auteur Nick Meharry | 2010-11-17

  1. 4

    Ont un coup d'oeil à Pixastic, spécifiquement http://www.pixastic.com/lib/docs/actions/crop.

    Je n'avais pas vu ça avant, je vais regarder. Merci.

    OriginalL'auteur Matt Ball

  2. 36

    Le HTML5 Canvas API fournit une méthode drawImage qui vous permet de recadrer l'image d'entrée.

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

    Copie et de recadrer les images en Javascript

    Pour plus d'informations, voir la spec (cette image est prise directement à partir de la spécification):

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

    C'est effectivement ce que je fais maintenant. Je suis juste essayer de savoir si il existe un moyen de recadrer l'image avant le dessin de simplifier mon code de rendu.
    Si votre seule préoccupation est simplyfing code, vous pouvez encapsuler les données d'image dans une ré-utilisable objet comme ceci: gist.github.com/702799
    Je travaille toujours sur elle, mais pour vous donner une idée de là où j'en suis, voici la source: bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js
    Merci, ça aide!

    OriginalL'auteur mike

  3. 1

    Il suffit de charger l'image dans une balise img avec l'attribut style d'affichage de la valeur hidden. Puis de recadrer l'image sur un écran de toile, puis écrire que hors de l'écran en toile principale de votre toile en tant que de besoin.

    OriginalL'auteur Cris Stringfellow

  4. 0

    Si vous ne voulez pas utiliser de la toile ou de la 3e partie de la bibliothèque, vous pouvez ajouter l'image dans un div (avec "overflow: hidden") de la taille de la version rognée, et donnant l'image négative de la gauche et de haut marges de.

    Chacun d'entre eux portera l'ensemble de l'image, mais se il vous suffit d'afficher une partie d'elle, ce qui peut -- ou non -- impact sur les performances. Je crois que vous pourriez avoir à donner de l'élément div en position:relative aussi bien pour le rendre IE heureux.

    Sinon, vous pouvez affecter l'image comme arrière-plan de la div, et de spécifier le backgroundPosition. Il me semble me rappeler cela n'a pas de travail pour quelque chose je l'ai fait une fois, je ne sais pas pourquoi. (Je crois que ça avait à voir avec l'opacité)

    Je ne suis pas sûr que cela soit pertinent, étant donné que la question a été posée dans le cadre de la création d'un JavaScript/toile jeu?
    juste assez, je suppose que je pensais que la toile a été mentionné, car il pensait que c'était seulement nécessaire pour cela. Mais oui, c'est facile, avec de la toile de copier des parties d'une image, je me demande pourquoi le pixastic bibliothèque est nécessaire....

    OriginalL'auteur rob