尝试将base64图像加载到画布中。

Question

我目前正在尝试将一个base64图像加载到我的画布中

  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包含一个有效的base64 png图像URL('data:image/png;base64,xxxxxx')，当我将此URL粘贴到浏览器中时，我可以看到一个有效的图像。

事实是什么都没有改变，我也没有任何错误提示。

如果您能帮助我，那就太棒了，谢谢。

- thomasA

---

“Change”会被记录吗？如果添加了image.error=console.error怎么办？而且你提供的字符串URL(data...不是一个有效的dataURI。请尽量完整和准确。 - Kaiido

这个回答解决了你的问题吗？将Base64 PNG数据转换为HTML5画布 - li x

Answer 1

是的，你分享的代码应该可以正常工作。

这里有一个例子

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>

唯一可能出错的地方是您正在使用的stack[1].save ...

- Helder Sepulveda

---

请使用评论而不是答案来向提问者请求更多信息。 - Kaiido

非常感谢您的回复，它很有帮助。通过测试您的代码，我找到了我的错误。事实上，在更改图像之前，我没有清除画布，而图像是该画布的备份（我正在画画布），因此我们仍然可以看到实际画布。 - thomasA

我曾经修改过ctx.drawImage(image,canvas.width,canvas.height)但是它没有起作用！所以请检查一下是否应该是ctx.drawImage(image,canvas.0,0)，我不知道这里的0是什么意思。 - cyril

@cyril 请查看drawImage的文档：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage ... 在那里您可以使用除0以外的其他值，我只是添加了一个示例。 - Helder Sepulveda