Base64 PNG 데이터를 HTML5 캔버스로

Base64로 인코딩 된 PNG 이미지를 캔버스 요소에로드하고 싶습니다. 이 코드가 있습니다.

<html>
<head>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

data =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

ctx.drawImage(data, 0, 0);

</script>
</body>
</html>

Chrome 8에서 오류가 발생합니다. Uncaught TypeError: Type error

그리고 파이어 폭스의 Firebug에서 "객체의 유형이 객체에 연결된 매개 변수의 예상 유형과 호환되지 않습니다"코드 : "17"

그 base64는 내가 김프에서 만든 5x5px 검은 색 PNG 정사각형이며 GNU / Linux의 프로그램 base64에서 base64로 바꿉니다.

— Tomáš Nesrovnal
소스

답변:

170

보기에 따라 실제로 drawImage에 이미지 객체를 전달해야합니다.

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

<canvas id="c"></canvas>

스 니펫 확장

나는 크롬에서 그것을 시도했고 잘 작동합니다.

— 제 리프
소스

좋은 대답이지만 이것이 매번 작동한다고 확신합니까? 을 설정 한 직후 이미지를 그리는 것이 버그가 있다는 것을 알았습니다 . 이미지로드가 완료되었는지 확인하기 위해 콜백을 src사용해야하기 때문 onload입니다. 이미지로드가 완료되지 않았기 때문에 내 테스트의 50 %가 실패했습니다.

— Scott Rippey 2012 년

와! 과거에서 폭발 :). 당신 말이 맞습니다. 이미지의 src를 설정 한 직후에 drawImage를 호출하는 경우 문제가 발생할 수 있으며 상황에 따라 렌더링을 시도하기 전에 이미지가 실제로로드되었는지 확인하기 위해 onload를 사용하는 것이 가장 좋습니다. 캔버스에. 위의 코드는 drawImage에 실제로 이미지 객체가 필요하다는 것과이를 전달하는 방법을 보여주는 예제에 불과했습니다.

— Jerryf 2012 년

참고로 여러 캔버스를 반복하는 ctx.drawImage(this,0,0);경우 이미지 변수가 올바른 이미지를 참조하도록이를 로 변경할 수 있습니다 . 그래도 좋은 대답!

— Dormouse

onload 이벤트는 src 전에 설정해야합니다. 때로는 SRC 즉시로드와 온로드 이벤트 발광하지 않을 수 있습니다

— Totty.js

하지만, data:image/길이가 큰 우리가 얻을 것이다414 (Request-URI Too Long

— Sarath

Jerryf의 대답은 하나의 결함을 제외하고는 괜찮습니다.

onload 이벤트는 src 전에 설정해야합니다. 때로는 src가 즉시로드되고 onload 이벤트를 발생시키지 않을 수 있습니다.

(Totty.js가 지적한 것처럼.)

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
image.src = "data:image/  png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

— 남자
소스

Btw : Jerryf의 답변을 편집했지만 누군가 거부했습니다. Jerryf가 2014 년에 마지막으로 로그인했다는 프로필에 따르면 Jerryf 일 수는 없습니다.

— John

"때로는 src를 즉시로드 할 수 있으며 onload 이벤트를 발생시키지 않습니다." 나는 이런 일이 거의 발생하지 않는 극히 드물다고 생각하지만, onload전에 설정하는 습관을 만들지 않을 이유가 없다 src. 나는 그렇게하는 것을 습관으로 만든다.

— markE

@markE 드물지 않습니다. 예를 들어 브라우저를 다시로드 할 때 브라우저가 이미지를 캐시 할 때 항상 발생합니다. 이것은 C ++ 프로그램의 IE 엔진에서 발생했습니다.

— Stefan Rein