Visionneuse d'images simple en JavaScript-js tutoriel-php.cn

Visionneuse d'images simple en JavaScript

DDD

Libérer： 2024-10-25 03:22:02

original

299 Les gens l'ont consulté

Simple Image Viewer in JavaScript

Il s'agit d'une visionneuse d'images très simple qui s'exécute dans le navigateur Web. Il utilise un seul fichier .html et 36 lignes de code. Enregistrez le code sous index.html - cliquer sur ce fichier ouvrira une fenêtre dans votre navigateur vous permettant de choisir une image de votre PC à afficher. J'ai pu ouvrir une image 1024 x 1024 - sympa.

Voici le 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>

Copier après la connexion

Ben Santora - Octobre 2024

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!