如何使用canvas绘制照片,drawImage在img.onload中无法显示照片？

无论照片是本地缓存还是url地址,在onload中始终无法显示,控制台没有任何错误输出

img

img

img

这是我试过的方法都是无法显示照片,控制台也是没有任何提示

img

求指导怎么该,是哪里的问题

img


这样时控制台只有3,直接跳过onload执行了

img


这样时有输出3,但页面没有显示,只有其他的


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();
      img.src = "https://uploadfile.huiyi8.com/2018/af/b7/11/e4/55819.jpg";
      img.onload = () => {
        canvas.height = img.naturalHeight;
        canvas.width = img.naturalWidth;
        ctx.drawImage(img, 0, 0);
      };
    </script>
  </body>
</html>

img