如何显示用户上传的图片的原始尺寸？

Question

我正在通过从头开始创建个人项目来学习 Web 开发。基本上我想设计一个类似于 9GAG（用户生成的内容网站）的网站。 我在显示上传的图像的过程中遇到了困难。图像会显示，但它会适应 div 元素的尺寸。我想要相反的：div 适应图像的原始尺寸。 我读到我应该编写一些 PHP 代码来获取图像尺寸（ getImageSize() ），然后编写 JavaScript 来根据 PHP 函数的结果更改 div 的宽度和高度。 我真的不知道这两个会如何互动。

那么，您有什么适合我需要的建议或解决方案吗？

谢谢， 马可

Answer 1

您可以使用naturalWidth 和naturalHeight 属性。无需 PHP。

document.querySelector(`img`).addEventListener(`load`, function(){
  console.log(`width: ${this.naturalWidth}`);
  console.log(`height: ${this.naturalHeight}`);
});

img {
  width: 100px;
  height: 100px;
}

<img src="http://pluspng.com/img-png/logo-javascript-png-file-javascript-logo-png-1052.png">

Answer 2

一般来说这是一个非常糟糕的主意，因为这样人们可以上传大量图片，这会破坏网页。

您的网站应该有一个最大宽度：

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

您的图片还应该：

.image {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}

这样它就不会破坏屏幕尺寸。如果您绝对必须将其设为全尺寸，即使它的宽度为 20,000 像素，然后将其设为一个新链接，在新标签中点击 target="_blank"。

<a href="file.png" target="_blank"><img src="file.png"></a>

就 PHP 端而言，有很多关于如何通过 PHP 上传文件的指南。要考虑的主要问题是安全性，因为人们可以在上传内容中嵌入讨厌的程序，因此请确保您使用的示例具有一定的安全性（限制文件扩展名和 mime 类型等）

像这样：https://stackoverflow.com/a/52663580/794481

Answer 3

在 PHP 中，您可以利用 getimagesize() 函数来获取有关上传图像的详细信息

例子：

// Calling getimagesize() function 
list($width, $height, $type, $attr) = getimagesize("image.png"); 

// Displaying dimensions of the image 
echo "Width of image : " . $width . "<br>"; 

echo "Height of image : " . $height . "<br>"; 

echo "Image type :" . $type . "<br>"; 

echo "Image attribute :" .$attr; 

就实际以上传大小显示图像而言，我还不得不说这样做是个坏主意，因为您的整个布局可能会中断，但也许应该做的是创建一个合适大小的缩略图和单击时，使用灯箱可能会以正常大小显示图像。