css - 异步获取图像时 Canvas 和 IMAGE 大小不一样

Question

我正在尝试绘制一只猫的 img 并在上面放一个相同大小的 Canvas 。

如果我直接给 ejs 一个 img url，效果很好。但是，如果我从 api 源获取 img url，然后呈现 ejs，则它不起作用 - Canvas 大小为 0。

这就是我从 api 获取 img 的方式:

let url = `https://api.thecatapi.com/v1/images/search?size=full`
    request(url, function (err, response, body) {
        if(err){
            console.log('Error!')
            // res.render('index', {catImageName: null, error: 'Error, please try again'});
        } else {
            let responsesArray = JSON.parse(body)
            let catJSON = responsesArray[0]

            if(catJSON !== null){
                let url = catJSON.url
                console.log(url)
                res.render('index', {catURL: url, error: null});
                // res.render('index', {catImageName: null, error: 'Error, please try again'});
            } else {
            }
        }
    });

这是我不使用 api 的方式:

let url = "https://www.rd.com/wp-content/uploads/2016/04/01-cat-wants-to-tell-you-laptop.jpg"
    res.render('index', {catURL: url, error: null});

这是我在上面放置 img 和 Canvas 的 ejs 部分:

<div id="CatTab" class="tabcontent">
  <div class="imageContainer">
      <% if(catURL !== null){ %>
        <img id="catImage" class="catImage" src="<%= catURL %>"/>
        <canvas class="canvas" id='myCanvas'></canvas>
      <% } %>
  </div>
</div>

这是脚本的相关部分:

 var canvas = document.getElementById("myCanvas");
 var catImage = document.getElementById("catImage");

 var ctx = canvas.getContext("2d");
 ctx.canvas.width = catImage.width;
 ctx.canvas.height = catImage.height;

这是相关的CSS代码:

.imageContainer {
  display: block;
  margin:0 auto;
  margin-bottom: 0 auto;
  margin-top: 0 auto;
  background-color: #b1f;
  width: 100%;
  position: relative;
}
.catImage {
  display: block;
  margin: 0 auto;
  width: 100%;
  z-index:1;
}

.canvas {
  display: block;
  position:absolute;
  left: 0;
  top: 0;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 10px solid red;
  z-index:20;
}

我在 Canvas 周围放置了一个红色边框以查看它，这是它不起作用时的样子:

Answer 1

将绘制 Canvas 的脚本放在函数中(即:drawCanvas() { /* code here */}，并在图像加载后运行此函数，在 onload 上使用 <img>:

<img id="catImage" class="catImage" src="<%= catURL %>" onload="drawCanvas()">

如果在图像加载之前绘制 Canvas ，宽度和高度将为 0 .另一种方法是调整 <img> 的大小。使用 CSS，因此它甚至在加载之前就有尺寸，但我不推荐它，因为您可能希望它根据设备屏幕宽度具有不同的尺寸。