JSキャンバスはdivを意図せずに伸ばします

Question

私は画像を保持するdivを持っています。

HTML：

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

coveringCanvasスタイル：

CSS：時間は右のI負荷である

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

このコードでは、画像の上に正確にキャンバスを置きます（意図したように）しかし、位置の前に変更されることが表示されます一番上に置くと、イメージの下または横に配置され、キャンバスを引き伸ばします。

結果として、キャンバスがイメージ上にあるにもかかわらず、キャンバスの作成によってdivが拡大され、divの下または下に空白が残ります。

これに対処する方法はありますか？または、私はちょうどキャンバスを作成した後divのサイズを変更する必要がありますか？この問題を回避するには

Answer 1

：

まず、あなたimage_holderのdivのpositionrelativeに設定します。すべての絶対配置されたelemntが最後に配置されることを確認します。その後

あなたは、以下のテストすることができ0

#canvasOverImage { 
    position:absolute; 
} 

にキャンバスpositionabsoluteへとleft postionを作る私は

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>

を引き起こす見にcanvaするためにいくつかの境界線を追加しましたスニペット

私はちょうど5 pxをfiトンexactely画像とあなたは以下の方法を使用して、それをすることによって、より効率的な方法でそのようなことを達成することができ、画像やキャンバス

Answer 2

の間に余分なスペースを削除...

document.getElementById('image').src = "https://s-media-cache-ak0.pinimg.com/736x/52/30/66/523066972863437c1a5daa774d1e5414.jpg"; 
 

 
function createStimuli(e) { 
 
    var canvas = $('#canvasOverImage')[0]; 
 
    // set canvas css style 
 
    canvas.style.marginLeft = -(e.width + 3) + 'px'; // 3 ~ border width 
 
    // set canvas attr in html 
 
    canvas.width = e.width; 
 
    canvas.height = e.height; 
 
    // draw text on canvas *proves canvas is on top* 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.fillStyle = 'black'; 
 
    ctx.font = 'bold 18px Arial'; 
 
    ctx.fillText('hello', 10, 25); 
 
}

.coveringCanvas { 
 
    border: 3px solid black; 
 
} 
 
.hide { 
 
    display: flex; 
 
}

<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(this)"> 
 
    <canvas id="canvasOverImage" class="coveringCanvas"></canvas> 
 
</div>