JavaScript의 간단한 이미지 뷰어-JS 튜토리얼-php.cn

JavaScript의 간단한 이미지 뷰어

DDD

풀어 주다： 2024-10-25 03:22:02

원래의

299명이 탐색했습니다.

Simple Image Viewer in JavaScript

웹 브라우저에서 실행되는 매우 간단한 이미지 뷰어입니다. 단일 .html 파일과 36줄의 코드를 사용합니다. 코드를 index.html로 저장합니다. 이 파일을 클릭하면 브라우저에 창이 열리고 PC에서 표시할 이미지를 선택할 수 있습니다. 1024 x 1024 이미지를 열 수 있었어요. 좋네요.

코드는 다음과 같습니다.

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

로그인 후 복사

벤 산토라 - 2024년 10월

위 내용은 JavaScript의 간단한 이미지 뷰어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!