Pemapar Imej Mudah dalam JavaScript-tutorial js-php.cn

Pemapar Imej Mudah dalam JavaScript

DDD

Lepaskan： 2024-10-25 03:22:02

asal

299 orang telah melayarinya

Simple Image Viewer in JavaScript

Ini adalah pemapar imej yang sangat mudah yang dijalankan dalam penyemak imbas web. Ia menggunakan satu fail .html dan 36 baris kod. Simpan kod sebagai index.html - mengklik pada fail ini akan membuka tetingkap dalam pelayar anda yang membolehkan anda memilih imej daripada pc anda untuk dipaparkan. Saya telah dapat membuka imej 1024 x 1024 - bagus.

Ini kodnya:

<!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>

Salin selepas log masuk

Ben Santora - Oktober 2024

Atas ialah kandungan terperinci Pemapar Imej Mudah dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!