HTML Canvas to image base64 problem

Programiranje
1

Pozdrav,

pokušavam exportati canvas u image na način:

var base64_src= canvas.toDataURL(‘image/png’);

I to mi je radilo na manjim slikama, ali kod jedne slike ne radi …koja je svega 6kb, ali nešto većih dimenzija (Ako je u dimenziji uopće problem …ali ništa preveliko: 650px x 890px)

Uglavnom dobijem base64_src, ali ako recimo postavim taj src u img element: …neće mi se prikazati ništa, ali ako isti base64_src iskoristim da kreiram novi image i umetnem ga u novi canvas element, taj novi canvas element će se prikazati ispravno.

Znači imam src koji je u suštini dobar (mogu kreirati canvas s njime) …ali ne mogu sa tim src-om kreirati img element, niti ga ne mogu na server side konvertirati u image file. (A to u konačnici želim napraviti)

Također ako taj base64src linkam direktno kroz browser, browser će mi samo prikazati prazan image koji odgovara veličinom za očekivani image. Inače mi se drugi src-ovi koje sam ovako generirao, uredno prikažu direktno kroz browser ako base64 kopiram na poziciju url-a.

Također, kod spremanja slike na server strani, isto mi se spremi image koji odgovara samo dimenzijom, ali se spremi prazna (bijela) slika.

Jel ima netko ideju o čemu bi se tu moglo raditi?
Hvala

2

Evo jedan base64 src koji radi:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABKklEQVR4nO3UQQ7DIAxEUe5/6XTTRTYpMx5DkfItsYkMtl8EY4xxda97uPlPsaLP7wIAAKcRpcEk3/2e9goAAE13t+tOK/nqWeJsAACwC0A5s3I+AAAcDJAMDQAAfwRww4VZfY5aAwAAzDu64m1wvzcvAN4NcB0QCuSy2luqTAKAUwB2vgfJoGo9aT8AAHhFnnLcwu53tZb9IwAAYL65634nqGkfj/kAvB1ASUqic1CltwISAABUlzJQF8yvId0AAIDbfnt3UExqKASw34BsvHkAcDpA8gYUiln3Xr3nYW0AAFCKzMJtQmlOqdXwgwAAAIBi4y6A8t3NSc8CAICNAEkttY8CDAAA7AJQotKPkgcAACaAG0lDCna6AABAANhQzMJI8ZUcAN4O8AHp2m2phpqLNgAAAABJRU5ErkJggg==

3

I ovaj koji ne radi:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnYAAAN7CAYAAADIvdeTAAAQNElEQVR4nO3WQQkAMAzAwPo33ZoYDMKdgjwzCwBAwvwOAADgDWMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBh7AAAIowdAECEsQMAiDB2AAARxg4AIMLYAQBEGDsAgAhjBwAQYewAACKMHQBAhLEDAIgwdgAAEcYOACDC2AEARBg7AIAIYwcAEGHsAAAijB0AQISxAwCIMHYAABHGDgAgwtgBAEQYOwCACGMHABBx45+FN+PMmRsAAAAASUVORK5CYII=

4

Mozes li malo koda pokazati ?

Posto kazes da je slika malo veca, moguce je da se neke stvari “odigraju prebrzo”, odnosno da se toDataURL metoda pozove prerano - tesko je reci bez koda :slight_smile:

1 Like
5

Jep, dobro si pretpostavio…u tome je bio problem.

Na više mjesta renderiram image u taj canvas…i još pravim callback da se slika učita prije nego ju renderiram u canvas…ali sam bedasto propustio primjetiti da će i cijeli canvas biti nespreman prije nego se ti callback-ovi svi izvrše.