try to load base64 img into a canvas

Question

i'm currently trying to load a base64 img into my canvas

  console.log('Change');
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
      ctx.drawImage(image, 0, 0);
    };
    image.src = stack[1].save;

stack[1].save contains a valid base64 png img URL('data:image/png;base64,xxxxxx'), when i paste this URL into my browser i can see a valid img

The fact is that nothing changes and i dont have any error

If you could help me this will be awesome, thank's

'Change' gets logged? What if you add an `image.error=console.error`? And the string you provided `URL(data...` is not a valid dataURI. `URL(`part should not be there. Please try to be as complete and exact as possible. — Kaiido, Aug 11 '18 at 23:32
Does this answer your question? [Base64 PNG data to HTML5 canvas](https://stackoverflow.com/questions/4409445/base64-png-data-to-html5-canvas) — li x, Nov 24 '20 at 13:20

score 2 · Accepted Answer · answered Aug 11 '18 at 23:19

2

Yes the code you have shared should work OK.

Here is an example

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII=";

<canvas id="canvas"></canvas>

The only thing that could be wrong is that stack[1].save that you are using...
Can you also share the code for your image or some more code on that stack?

answered Aug 11 '18 at 23:19

Helder Sepulveda

12,953
4
24
48

To request more informations from asker, please use the comments instead of an answer. – Kaiido Aug 11 '18 at 23:31
Thank's your for your reply, it was helpfull i've found my error by testing your code. The fact was that i did'nt clear my canvas before change the img, the img was a backup of that canvas (i'm drawing on the canvas) so we were stil seeing the actual canvas – thomasA Aug 11 '18 at 23:33

try to load base64 img into a canvas

1 Answers1