实现大图片秒开

最新推荐文章于 2024-04-30 16:57:21 发布

小蒋小蒋快乐成长

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量193

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/object_oriented/article/details/131531732

版权

使用瓦片技术:

在图片瓦片加载中，大图像被分割成等大小的瓦片，通常是正方形。每个瓦片都是独立的图像，具有自己的URL路径或标识符。当用户浏览或缩放图像时，只需要加载当前可见区域的瓦片，而不是整个大图像。这样可以有效地节省带宽和加载时间。

加载图片瓦片的过程通常涉及以下几个步骤：

切割图像：将大图像切分成多个小瓦片，每个瓦片都有自己的位置和标识符。
确定可见区域：根据用户的视口和缩放级别，确定当前可见的瓦片区域。
加载可见瓦片：根据可见区域的位置和标识符，仅加载当前可见的瓦片图像。
绘制瓦片：将加载完成的瓦片绘制到画布或图像容器中，以显示出完整的大图像。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <img src="./img/zero/0-0.png"/>
  <script>
    // 创建一个Canvas元素
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// 定义切片大小和缩放级别
var tileWidth = 192; // 每个瓦片的宽度
var tileHeight = 500; // 每个瓦片的高度
var zoomLevel = 0; // 缩放级别

// 加载大图片
var image = new Image();
image.src = './img/test.png';
image.onload = function() {
  // 计算切片数量
  var numTilesX = Math.ceil(image.width / (tileWidth * Math.pow(2, zoomLevel)));
  var numTilesY = Math.ceil(image.height / (tileHeight * Math.pow(2, zoomLevel)));

  // 设置Canvas大小
  canvas.width = numTilesX * tileWidth/4;
  canvas.height = numTilesY * tileHeight/4;

  // 初始化显示区域
  var viewportWidth = Math.ceil(window.innerWidth / (tileWidth * Math.pow(2, zoomLevel)));
  var viewportHeight = Math.ceil(window.innerHeight / (tileHeight * Math.pow(2, zoomLevel)));
  var viewport = {
    left: 0,
    top: 0,
    right: viewportWidth - 1,
    bottom: viewportHeight - 1
  };

  // updateViewport();
  //   loadVisibleTiles();
  // 监听滚动事件，根据滚动位置更新显示区域
  window.addEventListener('scroll', function() {
    updateViewport();
    loadVisibleTiles();
  });

  // 更新显示区域
  function updateViewport() {
    var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
    viewport.left = Math.floor(scrollX / (tileWidth * Math.pow(2, zoomLevel)));
    viewport.top = Math.floor(scrollY / (tileHeight * Math.pow(2, zoomLevel)));
    viewport.right = viewport.left + viewportWidth - 1;
    viewport.bottom = viewport.top + viewportHeight - 1;
  }

  // 加载可见的切片
  function loadVisibleTiles() {
    for (var y = viewport.top; y <= viewport.bottom; y++) {
      for (var x = viewport.left; x <= viewport.right; x++) {
        if (x >= 0 && x < numTilesX && y >= 0 && y < numTilesY) {
          loadTile(x, y);
        }
      }
    }
  }

    // 加载指定位置的切片
  function loadTile(x, y) {
    // 计算切片的起始位置和大小
    var tileX = x * tileWidth;
    var tileY = y * tileHeight;
    var tileWidthAtZoom = tileWidth * Math.pow(2, zoomLevel);
    var tileHeightAtZoom = tileHeight * Math.pow(2, zoomLevel);

    // 创建一个新的图片对象
    var tileImage = new Image();
    tileImage.src = './img/zero'+ '/' + x + '-' + y + '.png';
    console.log('./img/zero'+ '/' + x + '-' + y + '.png',tileX, tileY)
    tileImage.onload = function() {
      // 绘制切片到Canvas上
      context.drawImage(tileImage, tileX, tileY, tileWidthAtZoom, tileHeightAtZoom);

      // 在页面上显示Canvas
      document.body.appendChild(canvas);
    };
  }
}
  </script>
</body>
</html>

小蒋小蒋快乐成长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现大图片秒开

在图片瓦片加载中，大图像被分割成等大小的瓦片，通常是正方形。每个瓦片都是独立的图像，具有自己的URL路径或标识符。当用户浏览或缩放图像时，只需要加载当前可见区域的瓦片，而不是整个大图像。这样可以有效地节省带宽和加载时间。绘制瓦片：将加载完成的瓦片绘制到画布或图像容器中，以显示出完整的大图像。切割图像：将大图像切分成多个小瓦片，每个瓦片都有自己的位置和标识符。加载可见瓦片：根据可见区域的位置和标识符，仅加载当前可见的瓦片图像。确定可见区域：根据用户的视口和缩放级别，确定当前可见的瓦片区域。
复制链接

扫一扫