Question

我正在尝试绘制猫的img，如果有的话，在上面放一个相同大小的画布。

如果我直接给ejs提供img网址，则效果很好。但是，如果我从api来源获取img网址，然后呈现ejs，则它不起作用-画布大小为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});

这是ejs部分，我在其中放置了img和画布：

<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;
}

我在画布周围放置了一个红色边框以查看它，这是它在不起作用时的外观：

Answer 1

将脚本绘制画布的功能放在drawCanvas() { /* code here */}中，并在图像加载后使用onload上的<img>运行此功能：

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

如果在加载图像之前绘制画布，则宽度和高度将为0。一种替代方法是使用CSS来调整<img>的大小，因此甚至在加载之前就具有大小，但是我不建议这样做，因为您可能希望根据设备屏幕的宽度来设置不同的大小。

异步获取img时，画布和IMG大小不相同

1 个答案: