Javascript 画布上下文有时只返回零

我试图比较两个svg图像是否相等。为此，我首先将它们转换为画布（使用本文作为指南）。然后，我从每个画布提取像素数据数组，并确定两个数组的每个元素是否相等

这在一般情况下是有效的，但是第一次从网页的特定实例中的画布提取数据时，它返回一个只包含零的数组

例如，下面的代码包含一些内联js。当第一次在浏览器中打开仅包含此代码的html文件时（我尝试了firefox和chromium），控制台会打印一个仅包含零的数组。但是，如果刷新页面，所需的数组（在所有蓝色和alpha位置都有255个）将打印到控制台

有谁能告诉我为什么会发生这种情况，以及是否有任何方法可以绕过它，以便始终返回所需的数组

<script>
  // create canvas
  let can = document.createElement('canvas');
  // get canvas context
  let ctx = can.getContext('2d');

  // svg markup
  let xml = '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20" height="20" data-reactroot=""><rect x="0" y="0" width="20" height="20" fill="rgba(0, 0, 255, 1)"></rect></svg>';

  // make it base64
  let svg64 = btoa(xml);
  // header
  let b64Start = 'data:image/svg+xml;base64,';
  // prepend header
  let image64 = b64Start + svg64;

  // set it as the source of a img element
  let img = document.createElement('img');
  img.src = image64;

  // draw the image onto the canvas
  ctx.drawImage(img, 0, 0);

  // extract pixel data from context
  let data = ctx.getImageData(0, 0, 20, 20).data;

  // print pixel data somewhere we can see it
  console.log(data);
</script>

//创建画布
let can=document.createElement（'canvas'）；
//获取画布上下文
设ctx=can.getContext（'2d'）；
//svg标记
让xml=''；
//让它成为base64
设svg64=btoa（xml）；
//标题
让b64Start='数据：image/svg+xml；base64'；
//前置割台
设image64=b64Start+svg64；
//将其设置为img元素的源
设img=document.createElement（'img'）；
img.src=image64；
//将图像绘制到画布上
ctx.drawImage（img，0,0）；
//从上下文中提取像素数据
让data=ctx.getImageData（0,0,20,20）.data；
//将像素数据打印到我们可以看到的地方
控制台日志（数据）；

在绘制图像之前，您可能必须等待图像加载，即使它是一个数据URI。它有一个

onload

事件。@Ry-完全正确。添加侦听器可以修复所有问题。