캔버스 요소를 사용하여 가속 그래픽 활용 방법

Question

HTML 페이지가 있고 일반 핸들러를 사용하여 img 컨트롤의 바이트 배열을 가져옵니다.

최근 캔버스 요소를 사용하여 이동했습니다.

숨겨진 img 변수에 이미지를로드 한 후 내 캔버스에 이미지를로드했습니다.

최대한 빨리이 이미지를 새로 고침/변경하고 싶습니다.

나는 캔버스가 하드웨어 가속 그래픽을 이용한다는 것을 읽었습니다.

캔버스 요소가 자동으로 처리하나요? 추가 코드를 추가해야합니까?

특정 그래픽 카드가 필요하거나 그래픽 드라이버가 설치되어 있습니까?

내가이

var myIMG= new Image(); 

변수 이미지에 이미지를로드

context.Response.BinaryWrite(data); 

반환하는 제네릭 처리기 ASHX 페이지를 호출이있을 때 :

이 내 코드는 지금까지입니다 캔버스에 그 이미지 변수의 onload 이벤트를 둡니다.

var c1 = document.getElementById("live1x4"); 
    var ctx1 = c1.getContext("2d"); 
    c1.setAttribute('width', '360'); 
    c1.setAttribute('height', '288'); 
    img1x4.onload = function() { 
     ctx1.drawImage(img1x4, 0, 0); 
    }; 
    img1x4.onerror = function() { 
     $("#divMode5").html('error#1'); 
    }; 

Answer 1

Html5 캔버스는 가능한 한 그래픽을 가속화하기 위해 기존 GPU를 자동으로 사용합니다.

최신 브라우저를 설치했는지 확인하십시오 (일부 오래된 브라우저는 GPU를 사용하지 않음).

오프 스크린 img 요소를 캔버스에 그리면 GPU가 가속화됩니다.

context.drawImage(myImageElement,0,0); 

바이트 배열을 사용하고 있습니다. 따라서 .getImageData 및 .putImageData는 가속을 위해 GPU를 사용하지 않는다는 것을 언급해야합니다.