Question

我需要将base64图像加载到canaves。我尝试了此代码，但没有加载base64图像，但是其他文本和图像正确加载了，我该怎么办？

我试图将base64图像加载到画布上

  var playerName=document.getElementById('player-name').textContent;
  var cx = document.getElementById("myCanvas");
  var ctx = cx.getContext("2d");


  var playerPicture=document.getElementById('photo');

  var GoHouseSelect = new Image();

  GotHouseSelect.src="\""+GoHoueImage[imageNum]+"\""; 
  console.log(GoHouseSelect);

      ctx.drawImage(playerPicture,230,100,180,180);
      ctx.drawImage(GoHouseSelect,0,0);
      ctx.font = "56px Arial";
      ctx.fillText(playerName,200,380);

我在Chrome浏览器中遇到此“ net :: ERR_CONNECTION_RESET 400（错误请求）”错误

Answer 1

用于访问Base64图像的URI是

data:text/<image extension>;base64,<base64 string>

在您的情况下，可能看起来像这样（假设图片是png）

GotHouseSelect.src="data:text/png;base64," + GoHoueImage[imageNum];

如何将base64 png图像加载到画布

1 个答案: