drawImage를 사용하여 캔버스에 픽셀 데이터 그리기

필자는 픽셀 배열을 가지고 있으며,이 함수는 클립 데이터를 무시하기 때문에 putImageData를 사용하지 않고 캔버스에 그립니다.drawImage를 사용하여 캔버스에 픽셀 데이터 그리기

그래서, 그냥 데이터-URL로 픽셀 배열을 변환 한 다음이 같은 그때 캔버스에 그리는 이미지에 URL을 추가 한이 작품 만들려면 :

var ctx = { 
    display: document.querySelector('canvas#display').getContext('2d'), 
    convert: document.querySelector('canvas#convert').getContext('2d') 
} 

var image_data = THE_IMAGE_DATA_THAT_I_ALREADY_HAVE; 

ctx.convert.putImageData(image_data, 0, 0); 

var image_data_URL = ctx.convert.canvas.toDataURL('image/png'); 
var converter_image = document.querySelector('img#converter-image'); 

converter_image.onload = function() { 
    ctx.display.save(); 
    ctx.display.beginPath(); 
    ctx.display.arc(320, 240, 240, 0, Math.PI*2, true); 
    ctx.display.clip(); 
    ctx.display.drawImage(converter_image, 0, 0, 640, 480); 
    ctx.display.restore(); 
} 
converter_image.src = image_data_URL;

을

그러나 이것은 특히 60/초로하고 싶기 때문에 정말 나쁜 성능을 제공합니다.

다른 방법이 있어야합니다. 맞습니까?

출처

2012-10-01 richie