完善上面代码,生成完整的页面
时间: 2024-02-17 20:00:44 浏览: 17
好的,我来完善一下上面的代码,生成完整的HTML页面。在页面中,我们可以添加一个上传按钮和一个用于显示图片的元素(例如img标签),并通过JavaScript来实现上传图片限制DPI大于300的功能。
以下是完整的HTML和JavaScript代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>上传图片限制DPI</title>
</head>
<body>
<h1>上传图片限制DPI</h1>
<p>请上传DPI大于300的图片:</p>
<input type="file" id="file-input" accept="image/*" />
<br />
<br />
<div>
<img id="image-preview" style="max-width: 100%; max-height: 400px;" />
</div>
<script>
// 获取上传的图片文件
const fileInput = document.querySelector('#file-input');
const imagePreview = document.querySelector('#image-preview');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const image = new Image();
// 加载图片数据
const reader = new FileReader();
reader.onload = (e) => {
image.src = e.target.result;
};
reader.readAsDataURL(file);
// 检查图片DPI是否符合要求
image.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
const dpi = getDPI(canvas);
if (dpi > 300) {
// DPI符合要求,可以上传图片
console.log('可以上传图片');
imagePreview.src = image.src;
} else {
// DPI不符合要求,不能上传图片
console.log('不能上传图片');
imagePreview.src = '';
alert('请上传DPI大于300的图片!');
}
};
});
// 获取图片的DPI
function getDPI(canvas) {
const inch = 0.0254;
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const width = imageData.width;
const height = imageData.height;
const nPixels = width * height;
// 计算水平和垂直方向上的像素密度
const horizentalPitch = (canvas.width / nPixels) * inch;
const verticalPitch = (canvas.height / nPixels) * inch;
// 计算DPI
const dpi = Math.sqrt(Math.pow(horizentalPitch, 2) + Math.pow(verticalPitch, 2));
return dpi;
}
</script>
</body>
</html>
```
以上代码示例中,我们添加了一个用于显示图片的img元素,并通过JavaScript将图片的src设置为上传的图片文件的DataURL。同时,如果图片的DPI不符合要求,会弹出一个警告框提示用户重新上传符合要求的图片。