[html] Base64 PNG 데이터를 HTML5 캔버스로

Program / 글쓴이

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로 바꿉니다.

답변

보기에 따라 실제로 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>

스 니펫 확장

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

답변

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";

답변