jquery - 将以百分比表示的图像尺寸转换为像素

Question

我在 div 元素中有一个 img 元素，如下所示:

<div class='img-container col-md-12' id='box'> 
    <img src='/img/sample.png' id='srcImg' style='width:100%'>
</div>

在这里，我尝试使用 Canvas 将加载的大图像完全从现有图像放入分区元素，效果很好。现在我正在尝试使用以下方法获取在浏览器中呈现的图像尺寸:

var $srcImg = document.getElementById('srcImg');
var utilCanvas = document.createElement('canvas');
utilCanvas.width = $srcImg.naturalWidth;
utilCanvas.height = $srcImg.naturalHeight;
var ctx = utilCanvas.getContext("2d");
ctx.drawImage($srcImg, 0, 0);

var img = new Image();
img.id = 'tempImg';
img.src = utilCanvas.toDataURL();
img.style.width = '100%';
$srcImg.parentNode.insertBefore(img, $srcImg.nextSibling);

// Get the rendered image dimensions
var w = $('#tempImg').innerWidth();
var h = $('#tempImg').innerHeight();
print('Width: '+w+' ,Height: '+h);

输出为:宽度:100，高度:0。

当我在浏览器控制台窗口中尝试同样的事情时，它会给我正确的结果。

做同样的事情的正确方法是什么？

Answer 1

将您的高度/宽度检查包装在 img.onload = function(){//code } 中。图像始终异步加载。

    var img = document.createElement("img");
    img.src = utilCanvas.toDataURL();
    img.id = "imgId";
    img.style.visibility = "hidden";
    document.body.appendChild(img);

    img.onload = function () {

       //  code -> use imgId to grab the image..

    }