Данные Base64 PNG на холст HTML5 - PullRequest
Новая
       21

Данные Base64 PNG на холст HTML5

70 голосов
/ 10 декабря 2010

Я хочу загрузить изображение 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 Firefox это: «Тип объекта несовместим с ожидаемым типомпараметр, связанный с объектом "code:" 17 "

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

Ответы [ 2 ]

140 голосов
/ 10 декабря 2010

Похоже, вам нужно передать 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, и он отлично работает.

11 голосов
/ 24 апреля 2015

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

Событие 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";
...