嘗試將 base64 img 加載到畫布中

Question

我目前正在嘗試將 base64 img 加載到我的畫布中

  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 img URL('data:image/png;base64,xxxxxx')，當我將此 URL 粘貼到我的瀏覽器中時，我可以看到一個有效的 img

事實是沒有任何變化，我沒有任何錯誤

如果你能幫助我，這將是很棒的，謝謝

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+i) } image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="

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

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