写一个网页读取上传图片的dpi
时间: 2023-12-14 10:05:11 浏览: 32
要读取上传图片的dpi,可以使用JavaScript来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取上传图片的dpi</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function readImage(file) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function () {
var dpi = img.width / (file.size / 1024 / 1024);
alert("图片dpi为:" + dpi.toFixed(2));
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
$(document).ready(function () {
$("#fileInput").change(function () {
readImage(this.files[0]);
});
});
</script>
</head>
<body>
<input type="file" id="fileInput">
</body>
</html>
```
在这个示例中,我们使用了jQuery库来简化DOM操作。当用户选择文件后,我们会触发`readImage`函数来读取图片。在该函数中,我们使用FileReader对象来读取文件,并将其转换为DataURL格式。然后,我们创建一个Image对象,并在其`onload`事件中计算出图片的dpi,最后弹出一个提示框来显示dpi值。
需要注意的是,这个方法只能在图片已经上传到服务器后才能读取dpi。如果需要在客户端上传图片之前读取dpi,需要使用HTML5的File API来读取文件的元数据。