Question

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

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

这里我试图将加载的大图像完全从使用画布的现有图像中分割成分割元素，这很好。现在我尝试使用以下方式获取在浏览器中呈现的图像尺寸：

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

在import HttpsRedirect from 'react-https-redirect'; class App extends React.Component { render() { return ( <Providers> <HttpsRedirect> <Children /> </HttpsRedirect> <Providers /> ); } }内包裹你的身高/宽度。图像始终异步加载。

img.onload = function(){ //code }

Answer 2

当您应用该脚本时，似乎图像尚未加载。尝试将其放入$(document).ready(function() { ... })或使用其他方式运行图像加载后如果稍后加载它。

将图像尺寸百分比转换为像素

2 个答案: