在drawImage中使用imagedata對象

Question

是否可以使用imagedata數組對象來獲取Image（）對象。我的最終目標是使用drawImage，而不是putImageData，因爲putImageData太慢了（從類似qs和我自己的測試的stackoverflow類似）。我所有的是imagedata數組，我想在畫布上的現有圖像上繪製。

Answer 1

你可以試試這個不同的方法，假設每個的imageData包含圖像的水平線：

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); 
    } 
} 

但我擔心這樣做，這不會比putImageData()速度更快，但不會很多更快。

如果是這種情況，那麼如果存在等效的排序像素並在一個筆劃上繪製它們，則可以另外添加邏輯以跳過迭代。

Answer 2

您可以從ImageData創建ImageBitmap，並將其傳遞給drawImage()。 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

喜歡的東西：

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

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

我能做到這一點，以擴大一些ImageData我有，因爲putImageData不具備縮放參數。不幸的是，它看起來像IE，Edge和Safari不支持createImageBitmap()。

值得一提的是，對於我的情況（調整大小ImageData），createImageBitmap()確實有其他選項可以自行調整所產生的ImageBitmap的大小。