HTML5 캔버스 - 이미지를로드 할 때 크기 재조정 하시겠습니까?

Question

좋아요. 그래서 저는 html5 캔버스 게임을하고 있고, 항상 크기가 조정 된 이미지를 그릴 필요가 있습니다 (모든 픽셀 아트입니다). 불행하게도, drawImage에서 크기를 변경하면 현재 브라우저가 매우 느려지므로로드 할 때 크기를 조정하려고합니다. 그리고 나서 미리 크기 조정 된 이미지를 그립니다.

크기가 조정 된 이미지를 숨겨진 컨텍스트에 그려 넣은 다음 ctx.getImageData를 수행하려고했지만 바이트 배열이 붙어 이미지로 변환 할 방법이 없습니다. putImageData를 사용하여 최종 컨텍스트로 밀어 넣을 수는 있지만 속도가 느리고 분명히 알파 채널을 잃어 버립니다.

다른 옵션은 서버의 내용을 미리 조정할 수 있지만 가능한 경우이를 피하고 싶습니다.

아이디어가 있으십니까?

Answer 1

toDataURL (문자열 mimeType)이라는 캔버스 객체 (컨텍스트가 아님)에 메소드가 있습니다.이 메소드는 캔버스 내용을 이미지의 base64 인코딩 바이너리 문자열로 변환합니다. 모든 이미지 요소의 src 속성으로 사용할 수 있습니다.

ctx.drawImage(originalImage, 0, 0, originalImage.width, originalImage.height, 0, 0, 200, 200); 
var scaledImage = new Image(); 
scaledImage.onload = ...; 
scaledImage.src = canvas.toDataURL("image/png"); 

이제 normaly 이미지를 그릴 수 있습니다.