drawImage의 imagedata 객체 사용

Question

imagedata 배열 객체를 사용하여 Image() 객체를 가져올 수 있습니까? 나의 궁극적 인 목표는 putImageData가 너무 느리기 때문에 putImageData 대신에 drawImage를 사용하는 것이다. 내가 가지고있는 것은 캔바스에있는 기존 이미지 위에 그리려는 이미지 배열입니다.

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

나는 스케일링의 인수가없는 putImageData 때문에, 일부 ImageData 내가 가진 확장이 작업을 수행 할 수 있었다. 아쉽게도 IE, Edge 및 Safari는 createImageBitmap()을 지원하지 않습니다.

그것은,합니다 (ImageData 크기 조정) 내 경우에 대한 것을 언급 할 가치가 createImageBitmap() 자체에 결과 ImageBitmap 크기 조정을위한 추가 옵션을 가지고있다.