Dies ist ein sehr einfacher Bildbetrachter, der im Webbrowser ausgeführt wird. Es verwendet eine einzelne HTML-Datei und 36 Codezeilen. Speichern Sie den Code als index.html. Wenn Sie auf diese Datei klicken, wird ein Fenster in Ihrem Browser geöffnet, in dem Sie ein Bild von Ihrem PC zur Anzeige auswählen können. Ich konnte ein 1024 x 1024 großes Bild öffnen – schön.
Hier ist der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Viewer</title>
<style>
body {
background-color: #f0f0f0;
text-align: center;
font-family: Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
border: 2px solid #000;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Simple Image Viewer</h1>
<input type="file" id="fileInput" accept="image/*">
<img id="imageViewer" src="#" alt="Your image will appear here.">
<script>
const fileInput = document.getElementById('fileInput');
const imageViewer = document.getElementById('imageViewer');
fileInput.addEventListener('change', function() {
const file = this.files[0];
const url = URL.createObjectURL(file);
imageViewer.src = url;
});
</script>
</body>
</html>
Ben Santora – Oktober 2024
Das obige ist der detaillierte Inhalt vonEinfacher Bildbetrachter in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was soll ich tun, wenn sich die Maus nicht mehr bewegt?
Der Unterschied zwischen MySQL und SQL_Server
Es kann keine Verbindung zum Internet hergestellt werden
Welche Funktion hat der Frequenzteiler?
Verwendung der Exit-Funktion in der Sprache C
Der Unterschied zwischen TCP und UDP
Gründe, warum Excel-Tabelle nicht geöffnet werden kann
Was ist mobiles HD?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
