javascript - JS canvas 无意中拉伸(stretch)div

Question

我有一个包含图像的 div。图像本身稍后加载:

HTML:

<div id="image_holder" class='hide'>
    <img id="image" onload="createStimuli() " >
    <canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>

覆盖 Canvas 样式:

CSS:

.coveringCanvas { 
    position:relative;
    z-index:2 
}

接下来，当时间合适时，我会加载图像。

document.getElementById('image').src = `imagesource`;

因为现在图像已加载，所以它会触发createStimuli():

function createStimuli() {
    var image = $('#image');        
    var canvas = $('#canvasOverImage');
    canvas.css({top:`-${image.height()}px`});   // set style via css
    canvas.attr({ "height":image.height(), "width" :image.width()});  // set attr in html
}

这段代码将 Canvas 精确地放置在图像的顶部(按预期)，但看起来在位置更改为顶部之前，它被放置在图像的下方或旁边，从而拉伸(stretch)了 Canvas 。

因此，即使 Canvas 位于图像上， Canvas 的创建也会拉伸(stretch) div，从而在 div 下方/旁边留下空白空间。

有办法解决这个问题吗？或者我应该在创建 Canvas 后调整 div 的大小？

Answer 1

要解决此问题:

首先将 image_holder div 的 position 设置为 relative 。确保所有绝对定位元素都将定位到最后一个。

然后将 Canvas position设置为absolute，将left位置设置为0

#canvasOverImage {
  position:absolute;
}

您可以测试下面的代码片段，我已向 Canvas 添加了一些边框以查看结果

document.getElementById('image').src = "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg";

function createStimuli() {
    var image = $('#image');        
    var canvas = $('#canvasOverImage');
    //canvas.css({top:-(image.height()+5)+'px'});   // set style via css
    canvas.attr({ "height":image.height(),"width" :image.width()});
}

#image_holder {
  position:relative;
}

#canvasOverImage {
  border:1px solid red;
  position:absolute;
}

 #canvasOverImage {
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_holder" class='hide'>
    <img id="image" onload="createStimuli() " ><!--
    --><canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>

请注意，我刚刚删除了 5 像素以完全适合图像，并删除了图像和 Canvas 之间的额外空间