Данные в base64 PNG в Canvas в HTML5

Question

Данные в base64 PNG в Canvas в HTML5

Я хочу загрузить изображение PNG, закодированное в Base64, в элемент canvas. У меня есть такой код:

<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

и в Firefox Firebug это:" тип объекта несовместим с ожидаемым типом параметра, связанного с объектом "код: "17"

в этом base64 есть черный PNG квадрат 5x5px, который я сделал в GIMP и превратил его в base64 в программе base64 GNU/Linux.

736 2

html5 canvas base64 png

2 ответов:

Comments

Ничего не найдено.

Jerryf · Accepted Answer · 2018-01-06 07:37:35

по внешнему виду вам нужно на самом деле передать 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>
Я пробовал его в chrome, и он отлично работает.

John · Accepted Answer · 2015-04-25 01:31:59

ответ Джеррифа прекрасен, за исключением одного недостатка.

событие onload должно быть установлено перед src. Иногда src может загружайтесь мгновенно и никогда не запускайте событие onload.

(Как Тотти.Яш указал.)
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";