Kopieren und zuschneiden von Bildern in Javascript

Ich versuche zum erstellen eines kleinen 2D-Spiels in Javascript/Canvas, die aus mehreren animierten sprites. Ich würde gerne reduzieren auf die Anzahl der HTTP-requests, also kombinierte ich jeden frame der animation (32px von 32px) in ein Bild pro sprite (sagen, 192px von 128px). Gibt es eine Möglichkeit, ich kann kopieren und zuschneiden diese Bilder clientseitiger wieder in mehrere kleinere Bilder? Es wäre erheblich vereinfachen meine rendering-code und reduzieren Sie die Ladezeit aufgrund von Netzwerk-Latenz.

InformationsquelleAutor Nick Meharry | 2010-11-17
  1. 4

    Haben Sie einen Blick auf Pixastic, speziell http://www.pixastic.com/lib/docs/actions/crop.

    • Ich hatte nicht gesehen, dass vor, ich werde das prüfen. Danke.
    InformationsquelleAutor Matt Ball
  2. 36

    Das HTML5-Canvas-API bietet die Methode drawImage das Ihnen erlaubt, zu beschneiden das input-Bild.

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

    Kopieren und zuschneiden von Bildern in Javascript

    Weitere Informationen finden Sie auf der spec (das Bild stammt direkt aus der spec):

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

    • Das ist eigentlich das, was ich jetzt mache. Ich versuche nur, um herauszufinden, ob es gibt einen Weg, um das Bild zu beschneiden, bevor er es zur Vereinfachung meiner rendering-code.
    • Wenn Ihre einzige Sorge ist simplyfing code, könnten Sie Kapseln die Bild-Daten in einem wiederverwendbaren Objekt wie dieses: gist.github.com/702799
    • Ich arbeite noch daran, aber um Ihnen eine Idee von wo ich schon dabei bin, hier die Quelle: bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js
    • Danke, das hilft!
    InformationsquelleAutor mike
  3. 1

    Laden Sie einfach das Bild in einem img-tag mit style-Attribut display auf hidden gesetzt. Dann schneiden Sie das Bild auf einem off-screen-Leinwand, dann schreiben, dass off-screen-Leinwand auf Ihrer Leinwand, wie erforderlich.

    InformationsquelleAutor Cris Stringfellow
  4. 0

    Wenn Sie nicht möchten, zu verwenden, Leinwand oder 3rd-party-Bibliothek, fügen Sie das Bild in ein div (mit "overflow: hidden") von der Größe des zugeschnittenen version, und die das Bild negativ linken und oberen Rand.

    Jeder trägt das gesamte Bild, sondern nur die Anzeige eines Teils davon, die möglicherweise-oder auch nicht-auf die performance auswirken. Ich glaube, Sie müssen möglicherweise geben Sie dem div-element einen position:relative als auch zu machen also glücklich.

    Alternativ könnten Sie weisen das Bild als hintergrund des div, und geben Sie die backgroundPosition. Ich glaube mich zu erinnern das hat nicht funktioniert für sowas hab ich einmal, nicht sicher, warum. (Ich glaube, es hatte zu tun mit der Deckkraft)

    • Ich bin mir nicht sicher, ob dies überhaupt relevant ist, gegeben, dass die Frage wurde im Kontext der Erstellung einer JavaScript/canvas Spiel?
    • fair genug, ich denke, ich dachte, die Leinwand erwähnt wurde, weil er dachte, es war notwendig, nur für diese. Aber ja, es ist einfach mit canvas zu kopieren von teilen eines Bildes, Frage ich mich, warum die pixastic Bibliothek benötigt wird....
    InformationsquelleAutor rob
Schreibe einen Kommentar