Die Kombination von zwei Bildern auf eine Leinwand in HTML5

Arbeite ich mit dem HTML5-canvas-element. Sagen wir, ich habe 2 Bilddaten Objekte, die ich will, zu kombinieren, um in der Lage sein, auf einer Leinwand. Nehmen wir an, dass I don ' T care, wie Sie diese Bilder kombinieren. Beide Bilddaten Objekte haben genau die gleiche pixel-Anzahl und Form.

Was ist der beste Weg zu kombinieren die beiden Bilder?

Ich vermute, dass ich kann schreiben Sie eine for-Schleife und Durchlaufen die Bilddaten-array und manuell zu kombinieren und setzen jedes rgba-Wert pro pixel, aber ich Frage mich, ob es einen besseren Weg? Ich muss diese operation so schnell wie möglich geschehen.

Vielen Dank im Voraus.

  • Was bedeutet "kombinieren" meinst? Sie wollen, einer fiel über den anderen, so dass Sie es nicht sehen können? Sie möchten eine überlagert die andere? Sie wollen, dass Sie mit gestapelten Ende-an-Ende?
  • Ich möchte drop auf der Oberseite des anderen. Die Pixel in diesen Bildern sind völlig transparent. Also, wenn image1 hat einen schwarzen Kreis auf der linken Hälfte, und image2 hat ein Quadrat auf der rechten Hälfte, würde ich mag, Sie zu kombinieren, so bekomme ich 1 Bild mit einem Kreis auf der linken Seite und ein Quadrat auf der rechten Seite.
InformationsquelleAutor ctown4life | 2010-10-07
  1. 7

    Wenn Sie einfach nur auf der Suche zu überlagern eines Bildes auf ein anderes, werden Sie wahrscheinlich wollen, um etwas wie das hier tun:

    ctx.drawImage(image1, x, y);
//adjust globalAlpha as needed, or skip if the image has its own transparency
ctx.globalAlpha = 0.5;
ctx.drawImage(image2, x, y);

    ODER, je nach der spezifischen Wirkung Sie nach:

    ctx.drawImage(image1, x, y);
ctx.globalCompositeOperation = "lighten"; //many other possibilities here
ctx.drawImage(image2, x, y);

    Dieser wird wahrscheinlich schneller als das zeichnen der pixel-by-pixel durch den get/putImageData Methoden, aber um wie viel, ist browser-abhängig.

    • Der Fragesteller sagte (in einem späteren Kommentar), dass das Bild Pixel sind meist transparent, so dass ich glaube nicht, dass die alpha-oder compositing-Betrieb sogar eingestellt werden müssen.
    • Das ist richtig. Ich werde aktualisieren Sie den Kommentar in der ersten Reihe von code.
    InformationsquelleAutor C-Mo
Schreibe einen Kommentar