Question

我之前遇到过其他人在本网站上遇到的问题，但没有一个解决方案对我有所帮助。

我有一个更新div内图像的方法（读取：用户上传新图像），其中图像的大小调整以适应设定的比例（最大高度和最大宽度为45x45）。我必须调整保持图像的div的大小为2 *它的尺寸，例如下面的示例：

原始图像为180x180。

它被调整为45x45。 Div必须是90x90。

代码如下：

function uploadThumbnail(id, xCoord, yCoord) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("thumbnailLoader"+id).files[0]);    
oFReader.onload = function(oFREvent) {
    var mapThumbnail = updateMapThumbnail(oFREvent.target.result, id);
    var mapContainer = document.getElementById("thumbnail"+id);
    var informationContainer = document.getElementById("container"+id);

    console.log(mapThumbnail.width);
    mapContainer.removeChild(document.getElementById("mapThumbnail"+id));
    informationContainer.removeChild(document.getElementById("infoThumbnail"+id));

    informationContainer.insertBefore(updateInfoThumbnail(oFREvent.target.result, id), informationContainer.firstChild);
    mapContainer.appendChild(mapThumbnail);
  };
};

function updateMapThumbnail(result, id){
    var newThumbnail = document.createElement("img");

    newThumbnail.src = result;
    newThumbnail.style.maxWidth = "45px";
    newThumbnail.style.maxHeight = "45px";
    newThumbnail.id = "mapThumbnail" + id;

    return newThumbnail;
}

如您所见，我在其中添加了一个console.log方法用于测试目的。我面临的问题是，使用set max dimensions（45x45）生成mapThumbnail仍然具有使用原始图像大小设置的高度和宽度属性。我尝试读取image.height / width和image.style.height / width以及naturalHeight / width和clientHeight / width。

这些解决方案在调整大小后都不会返回高度和宽度。

感谢您的时间。

另外，请不要提供需要JavaScript库的解决方案。

编辑：忘了提到放在div中的图像被重新调整为我想要的尺寸。这只是看似错误的属性。

Answer 1

图像上有四种不同且不重要的宽度：

1）img.naturalWidth是原始图像文件的px宽度。将其他宽度设置为某个值时，它不会更改。当未定义其他值时，将呈现此值。

2）img.width是img的一个属性。您可以在html img标记内找到它，并可以使用img.setAttribute('width', 'value')进行设置。当其他人设置为某个值时，它不会改变。当3）未定义且4）>> img.width或未定义时，将呈现此值。

3）img.style.width是图像样式的css属性。您可以使用img.style.width = 'value';在css或img标记中的style-attribute中设置它。当其他人设置为某个值时，它不会改变。当该值为＆lt; = 4）或未定义4）时，将呈现此值。

4）img.style.max-width是图像样式的另一个css属性。您可以使用img.style.maxWidth = 'value';在css或img标记中的style-attribute中设置它。当其他人设置为某个值时，它不会改变。当2）或3）未定义或具有值> 2时，将呈现此值。 4）。

因此，您必须自己决定要接收或设置的值。

与身高相同，也有四个高度。

编辑根据您的评论：在你的函数updateMapThumbnail中，你创建了一个新的img。除非您使用newThumbnail.setAttribute('width', 'value)定义，否则新创建的img没有.width。与img.style.width相同：除非您在某处明确地设置它，否则就不存在。

Answer 2

您尝试过： console.log(getComputedStyle(mapThumbnail).width);

调整大小后获取图像尺寸

2 个答案: