Leinwand: Maske ein Bild und speichern Sie Ihre alpha-Kanal?

Hier ist, was ich versuche zu tun:

  1. Bild A und Bild B. Bild B ist ein schwarz /weiß Bild mit der Maske.
  2. Ersetzen Bild Einen alpha-Kanal mit B Bild der rot-Kanal.
  3. Draw image C auf die Leinwand.
  4. Zeichnen Sie Ein Bild auf dem oberen Bild C.

Alles scheint ok, bis Sie zu Schritt 4. Bild C ist nicht sichtbar, und wo Ein Bild sollte transparent sein, gibt es weiße Farbe.

cx.putImageData(imageA, 0, 0);
var resultData = cx.getImageData(0, 0, view.width, view.height);

for (var h=0; h<resultData.data.length; h+=4) {
    resultData.data[h+3] = imageB.data[h];
}

cx.putImageData(imageC, 0, 0);
cx.putImageData(resultData, 0, 0);
InformationsquelleAutor Nikolay Dyankov | 2012-01-27
  1. 18

    Simon hat Recht: die putImageData Methode nicht zahlen keine Aufmerksamkeit auf compositing; es werden lediglich Kopien pixel-Werte. Um das zu bekommen, compositing, brauchen wir Zeichenoperationen.

    Wir brauchen, um Durcheinander mit den Kanälen (rot in der alpha) mit der pixel-Daten, legen Sie, dass die geänderten pixel-Daten in ein Bild, und dann verwenden Sie eine composite-Betrieb, um die gewünschte Maskierung.

    Leinwand: Maske ein Bild und speichern Sie Ihre alpha-Kanal?

    //copy from one channel to another
var assignChannel = function(imageData, channelTo, channelFrom) {
  if(channelTo < 0 || channelTo > 3 || channelFrom < 0 || channelFrom > 3) {
    throw new Error("bad channel number");
  }
  if(channelTo == channelFrom)
    return;
  var px = imageData.data;
  for(var i = 0; i < px.length; i += 4) {
    px[i + channelTo] = px[i + channelFrom];
  }
};
/**============================================================================ 
  * this function uses 3 or 4 canvases for clarity /pedagogical reasons:
  * redCanvas has our mask image;
  * maskCanvas will be used to store the alpha channel conversion of redCanvas' image;
  * imageCanvas contains the image to be masked;
  * ctx is the context of the canvas to which the masked image will be drawn.
============================================================================**/
var drawOnTopOfRed = function(redCanvas, maskCanvas, imageCanvas, ctx) {
  var redImageData = redCanvas.getContext("2d").getImageData(0, 0, w, h);

  //assign the alpha channel
  assignChannel(redImageData, 3, 0);

  //write the mask image
  maskCanvas.getContext("2d").putImageData(redImageData, 0, 0);

  ctx.save();

  //draw the mask
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage(maskCanvas, 0, 0);

  //draw the image to be masked, but only where both it
  //and the mask are opaque; see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing for details.
  ctx.globalCompositeOperation = "source-in";
  ctx.drawImage(imageCanvas, 0, 0);
  ctx.restore();
};

    jsfiddle-Beispiel

    Ein doodle mit dem Beispiel:

    Leinwand: Maske ein Bild und speichern Sie Ihre alpha-Kanal?
    Leinwand: Maske ein Bild und speichern Sie Ihre alpha-Kanal?

    • Danke, Lesen Sie meinen Kommentar auf Simon ' s Antwort 🙂 Problem gelöst...
    InformationsquelleAutor ellisbben
  2. 2

    Da in Schritt 4 werden Sie mit putImageData die perfekt Pixel ersetzt. Sie möchten, zeichnen Sie Ein Bild oben Bild C, so kann man das nicht machen. Stattdessen möchten Sie drawImage()

    So tun:

    cx.putImageData(imageC, 0, 0); //step 3
//create a new canvas and new context,
//call that new context ctx2 and canvas can2:
var can2 = document.createElement('canvas');
//set can2's width and height, get the context etc...
ctx2.putImageData(resultData, 0, 0);
cx.drawImage(can2, 0, 0); //step 4 using drawImage instead of putting image data
    • Wow, ich wusste gar nicht, dass Sie passieren kann ein canvas-Objekt als argument zu der Methode drawImage(). Dies funktioniert, aber aus irgendeinem Grund drawImage() ist viel, viel langsamer als putImageData() und da muss ich Bilder zeichnen alle 20-40ms, es ist nicht eine perfekte Lösung. Ich habe einige Experimente und ich löste es mit zwei Leinwände. PutImageData() ersetzt das pixel-Werte, aber wenn ich mir eine andere Leinwand, die unterhalb der ersten ein, ich kann sehen, dass es transparent ist. Anyway, ich danke Ihnen für Ihre Zeit, es zu schätzen wissen!
    • Das ist absurd. mit imageData ist fast immer viel, viel langsamer als mit drawImage. Möglicherweise gibt es etwas anderes hier im Spiel - kann ich sehen Sie Ihre vollständige code?
    • Ich schickte Ihnen eine E-mail.
    InformationsquelleAutor Simon Sarris
Schreibe einen Kommentar