javascript - try to load base64 img into a canvas - Stack Overflow

admin管理员组

文章数量:1390931

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

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

• javascript
• jquery
• canvas
• base64
• png

Share Improve this question Follow asked Aug 11, 2018 at 22:55 thomasAthomasA 29711 gold badge55 silver badges1515 bronze badges 2

• '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 plete and exact as possible. – Kaiido Commented Aug 11, 2018 at 23:32
• Does this answer your question? Base64 PNG data to HTML5 canvas – li x Commented Nov 24, 2020 at 13:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Yes the code you have shared should work OK.

Here is an example

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="

var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+4*i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="

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

The only thing that could be wrong is that stack[1].save that you are using...

本文标签： javascripttry to load base64 img into a canvasStack Overflow