Question

我认为这是非常简单的代码，我希望它能修改img宽度/高度，但它不起作用。

我使用createObjectURL，然后获取该图像的宽度/高度。然后，我将计算宽度/高度，以便我可以以适当的比例创建缩略图（不会扭曲原始图像，只是将其缩小）。现在，我只是硬编码值以查看它是否有效，但事实并非如此。

然后，我用新值加载图像。

但它不会改变我在css中为img设置的原始高度/宽度。

这里有一个小提琴：

所有，帮助，一如既往地表示赞赏。 Belows是相关的代码块。 id =＆＃34; fileDisplay＆＃34;是容器。后台网址将是＆＃34; loading＆＃34;图片。 ID =＆＃34; imgDisaply＆＃34;是图像加载的img组件，它掩盖了＃34; loading＆＃34;背景。这是我能弄清楚如何给出一个＆＃34; loading＆＃34;在图像加载时将图像作为对用户的反馈。

imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).width="500";
document.getElementById("imgDisplay" + justNumber).height="200";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;

Answer 1

你错过了＆＃39; .style＆＃39;和规格attr（px，em等）。

我相信这可能就是你想要的：

imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).style.width="500px";
document.getElementById("imgDisplay" + justNumber).style.height="200px";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;

Answer 2

在DOM中，您需要使用.style来提及样式。

document.getElementById("imgDisplay" + justNumber).style.width="500";
document.getElementById("imgDisplay" + justNumber).style.height="200";

Answer 3

好的，所以这里是从源头拍摄的图像和警告信息向我们展示她的宽度和高度希望这个片段可以帮助你：

＆＃13;

var image = document.createElement('img');
var image_url = "https://images-na.ssl-images-amazon.com/images/G/01/img15/other-services/billboard/29597_os_int_fr_showcase_1500x300._CB288675343_.jpg"; 

image.src = image_url;

image.onload = function()
{
  alert("width : " +image.width+ " px");
  alert("height : " +image.height+ " px");
}

＆＃13;

希望有所帮助

Answer 4

设置宽度/高度的任何方式都是正确的。它们都有效，但方式不同。

document.getElementById("imgId").style.width="500px";

会产生一个带内联样式属性的img：

<img src="..." style="width: 500px" />

虽然document.getElementById("imgId").setAttribute("width", "500");创建了一个带有width属性的img（最后没有px）：

<img src="..." width="500" />

如何设置图像宽度/高度

4 个答案: