在 <img>

问题描述 投票：0回答：1

我正在从服务器加载图像。我已经确认整个文件正在下载。第一个图像是正在显示的图像，第二个图像是服务器拥有的图像。请注意，显示的图像中缺少前 10%（左右）。

HTML 正文、代码和 CSS 

<body>
<!-- Image -->
<div id="worldMapContainer" class="world-map-container">
    
</div>

<!-- Zoom control buttons -->
<div class="zoom-controls">
    <button class="zoom-button" onclick="setZoom('fit')">
        <img src="assets/fullscreen-icon.png" alt="Fit to Screen" title="Fit to Screen" />
    </button>
    <div class="zoom-levels">
        <button onclick="setZoom(1)">1x</button>
        <button onclick="setZoom(5)">2x</button>
        <button id="zoom-3x" onclick="setZoom(10)">3x</button>
        <button onclick="setZoom(15)">4x</button>
    </div>
</div>
</body>

.world-map-container {
    position: relative;
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 10px;
    width: 85vw;
    height: 85vh;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image styling */
.world-map-container img {
    display: block;
    max-width: none;
    max-height: none;
    image-rendering: pixelated; /* Preserve pixelated effect when scaled */
    image-rendering: crisp-edges; /* Fallback for some browsers */
}

async onWorldMap(msg) {
    const imageData = `data:image/png;base64,${this.arrayBufferToBase64(msg.params.image.data)}`
    console.log('download: ', imageData.length)

    localStorage.setItem("mapData", imageData)
    localStorage.setItem("mapWidth", msg.params.width.toString())
    localStorage.setItem("mapHeight", msg.params.height.toString())

    this.loadImageFromLocalStorage('mapData')
}

arrayBufferToBase64(buffer) {
    let binary = ''        
    const bytes = new Uint8Array(buffer)
    const len = bytes.length
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
    }
    return btoa(binary)
}

loadImageFromLocalStorage(key) {
    this.map = localStorage.getItem(key)

    if (this.map) {
        console.log('load: ' + this.map.length)
        this.width = parseInt(localStorage.getItem('mapWidth'))
        this.height = parseInt(localStorage.getItem('mapHeight'))

        this.mapImage = document.createElement("img")
        this.mapContainer = document.getElementById("worldMapContainer")
         
        this.mapImage.id = 'worldMap'
        this.mapImage.alt = 'World Map'
        this.mapImage.src = this.map
        this.mapImage.width = this.width
        this.mapImage.height = this.height
        this.mapContainer.appendChild(this.mapImage)
    }
}

任何想法将不胜感激，我对网络编程相当陌生。 loaded image

server image

javascript html css image
1个回答
0
投票

在您的CSS中，

.world-map-container
正在使用
height: 85vh;
width: 85vw;
，它的大小不足以容纳您的图像。删除它们将允许显示整个图像。

试试下面我的例子：

<head>
    <style>
        .world-map-container {
            position: relative;
            margin-left: 10px;
            margin-top: 20px;
            margin-right: 10px;
            /* Uses only 85% of the viewport. Your image size exceeds this */
            /* width: 85vw; */
            /* height: 85vh; */
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Image styling */
        .world-map-container img {
            display: block;
            max-width: none;
            max-height: none;
            image-rendering: pixelated; /* Preserve pixelated effect when scaled */
            image-rendering: crisp-edges; /* Fallback for some browsers */
        }
    </style>
</head>

<body>
    <!-- Image -->
    <div id="worldMapContainer" class="world-map-container">
        
    </div>
    
    <!-- Zoom control buttons -->
    <div class="zoom-controls">
        <button class="zoom-button" onclick="setZoom('fit')">
            <img src="assets/fullscreen-icon.png" alt="Fit to Screen" title="Fit to Screen" />
        </button>
        <div class="zoom-levels">
            <button onclick="setZoom(1)">1x</button>
            <button onclick="setZoom(5)">2x</button>
            <button id="zoom-3x" onclick="setZoom(10)">3x</button>
            <button onclick="setZoom(15)">4x</button>
        </div>
    </div>


    <script>
        wat = {"params": {"width": 4000, "height": 4000}}
        onWorldMap(wat)
        
        async function onWorldMap(msg) {
            // const imageData = `data:image/png;base64,${this.arrayBufferToBase64(msg.params.image.data)}`
            const imageData = `https://i.sstatic.net/kE32sxOb.png`
            console.log('download: ', imageData.length)

            localStorage.setItem("mapData", imageData)
            localStorage.setItem("mapWidth", msg.params.width.toString())
            localStorage.setItem("mapHeight", msg.params.height.toString())

            this.loadImageFromLocalStorage('mapData')
        }

        function arrayBufferToBase64(buffer) {
            let binary = ''        
            const bytes = new Uint8Array(buffer)
            const len = bytes.length
            for (let i = 0; i < len; i++) {
                binary += String.fromCharCode(bytes[i])
            }
            return btoa(binary)
        }

        function loadImageFromLocalStorage(key) {
            this.map = localStorage.getItem(key)

            if (this.map) {
                console.log('load: ' + this.map.length)
                this.width = parseInt(localStorage.getItem('mapWidth'))
                this.height = parseInt(localStorage.getItem('mapHeight'))

                this.mapImage = document.createElement("img")
                this.mapContainer = document.getElementById("worldMapContainer")
                
                this.mapImage.id = 'worldMap'
                this.mapImage.alt = 'World Map'
                this.mapImage.src = this.map
                this.mapImage.width = this.width
                this.mapImage.height = this.height
                this.mapContainer.appendChild(this.mapImage)
            }
        }
    </script>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.