Base64 PNG verilerini HTML5 tuvaline

Base64'te kodlanmış bir PNG görüntüsünü tuval öğesine yüklemek istiyorum. Bu koda sahibim:

<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'de şu hatayı alıyorum: Uncaught TypeError: Type error

Ve Firefox'un Firebug'ında şu: "Bir nesnenin türü, nesneyle ilişkilendirilmiş beklenen parametre türü ile uyumsuz" kod: "17"

Bu base64'te, GIMP'de yaptığım 5x5px siyah PNG kare var ve onu GNU / Linux'un base64 programında base64'e çeviriyorum.

— Tomáš Nesrovnal
kaynak

Yanıtlar:

172

Görünüşe bakılırsa, aslında çizimden geçmeniz gerekiyor.

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>

Snippet'i genişlet

Bunu kromda denedim ve iyi çalışıyor.

— Jerryf
kaynak

Güzel cevap, ama bunun her seferinde işe yaradığına emin misin? Öğesini ayarladıktan hemen sonra bir resim çizmeyi hatalı buldum src, çünkü onloadresmin yüklenmesinin bittiğinden emin olmak için geri aramayı kullanmanız gerekiyor . Görüntünün yüklenmesi bitmediği için testlerimin% 50'si başarısız oldu.

— Scott Rippey

Vaov! Geçmişten patlama :). Çok haklısın. Eğer görüntünün src'sini ayarladıktan hemen sonra drawImage'ı çağırıyorsanız, muhtemelen sorunlarla karşılaşırsınız ve durumunuza bağlı olarak, büyük olasılıkla, işlemeyi denemeden önce görüntünün gerçekten yüklendiğinden emin olmak için onload kullanmak isteyeceksiniz. tuvale. Yukarıdaki kod, drawImage'ın aslında bir görüntü nesnesi gerektirdiğini ve bunun ona nasıl aktarılacağını gösteren bir örnekten daha fazlasıydı.

— Jerryf

Bir not olarak, birkaç tuvale bakıyorsanız, ctx.drawImage(this,0,0);görüntü değişkeninin doğru görüntüye başvurmasını sağlamak için bunu değiştirmek isteyebilirsiniz . Yine de harika cevap!

— Dormouse

Onload olayı src'den önce ayarlanmalıdır. Bazen src anında yüklenebilir ve onload olayını asla

— tetiklemez

Ama eğer data:image/uzunluğu büyük biz alacak414 (Request-URI Too Long

— Sarath

Jerryf'in cevabı, bir kusur dışında gayet iyi.

Onload olayı src'den önce ayarlanmalıdır. Bazen src anında yüklenebilir ve onload olayını asla tetiklemez.

(Totty.js'nin işaret ettiği gibi.)

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

— John
kaynak

Btw: Jerryf'in cevabını düzenledim ama birisi reddetti. Profilinde en son 2014 yılında giriş yaptığını söylediği için Jerryf olamaz.

— John

"Bazen src anında yüklenebilir ve onload olayını asla tetiklemez." Bence bunun meydana gelmesi neredeyse hiç görülmemesi için son derece nadirdir, ancak bunu daha onloadönce bir alışkanlık haline getirmemek için hiçbir neden yok src... Bunu bir alışkanlık haline getiriyorum.

— Marke

@markE Nadir değildir. Tarayıcı resmi önbelleğe aldığında her zaman olacaktır, örneğin bir tarayıcı yeniden yüklenirken. Bu, bir c ++ programındaki bir IE motorunda oldu.

— Stefan Rein