Verwenden von Bilddatenobjekt in DrawImage

Question

Ist es möglich, Bilddaten-Array-Objekt zu verwenden, um ein Image() -Objekt zu erhalten. Mein eventuelles Ziel ist es, drawImage anstelle von putImageData zu verwenden, da putImageData zu langsam ist (aus stackoverflow ähnlichen qs und meinen eigenen Tests). Alles, was ich habe, ist ein Bilddaten-Array, das ich über ein vorhandenes Bild auf einer Leinwand zeichnen möchte.

Answer 1

Sie können versuchen, diesen anderen Ansatz, unter der Annahme, dass jede imagedata eine horizontale Linie des Bildes enthält:

function drawImage(imageDataArray) { 
    // iterate through all lines 
    for(var j = 0; j < imageDataArray.length; ++j) { 
     var imageData = imageDataArray[j], 
      data = imageData.data, 
      x = 0, 
      y = j; 

     drawLine(data, x, y); 
    } 
} 

function drawPixel(ctx, red, green, blue, aplha, x, y) { 
    ctx.fillStyle = "rgba("+red+","+green+","+blue+","+(alpha/255)+")"; 
    ctx.fillRect(x, y, 1, 1); 
} 

// The x and y argments embody the staring value of both coordinates 
function drawLine(data, x, y) { 
    // iterate through all pixels 
    for(var i = 0, n = data.length; i < n; i += 4) { 
     if(i != 0) { 
      x = i/4; 
     } 
     var red = data[i]; 
     var green = data[i + 1]; 
     var blue = data[i + 2]; 
     var alpha = data[i + 3]; 

     drawPixel(ctx, red, green, blue, aplha, x, y); 
    } 
} 

Aber ich fürchte, tun, dass dies als putImageData() nicht schneller sein, oder es wird nicht viel sein schneller.

Wenn dies der Fall ist, können Sie zusätzlich Logik hinzufügen, um Iterationen zu überspringen, wenn entsprechende Sequenzierungspixel vorhanden sind, und diese auf einmal zeichnen.

Answer 2

Sie können eine ImageBitmap von einer ImageData erstellen und diese an drawImage() übergeben. https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

Etwas wie:

const imgdata = ...; 
const ctx = ...; 

createImageBitmap(imgdata).then(function(imgBitmap) { 
    ctx.drawImage(imgBitmap, ...remaining args); 
}); 

konnte ich dies tun einige ImageData Ich hatte maßstäblich, da putImageData keine Argumente für die Skalierung hat. Leider sieht es so aus, als würden IE, Edge und Safari createImageBitmap() nicht unterstützen.

Es ist erwähnenswert, dass für meinen Fall (Größe der ImageData), createImageBitmap() hat zusätzliche Optionen für die Größenänderung der resultierenden ImageBitmap allein.