如何为Google Storage存储的图片添加缩放/平移功能

一、前置准备：Google Storage配置 #

• 确保存储桶中的图片可被网站访问：
  • 公开图片：在Google Storage控制台，给目标存储桶或单个图片添加allUsers的Storage Object Viewer权限；
  • 私有图片：通过Google Cloud SDK生成签名URL，自定义有效期，前端通过该URL加载图片。
• 配置跨域资源共享（CORS）：由于网站域名与Google Storage域名不同，需设置CORS规则允许网站访问。示例配置文件cors-config.json：

  [
    {
      "origin": ["https://your-website-domain.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
  

  执行命令上传配置：

  gsutil cors set cors-config.json gs://your-bucket-name
  

二、前端实现缩放/平移功能 #

推荐使用成熟前端库快速实现，以下两种方案适配不同场景：

方案1：Viewer.js（轻量适配普通图片） #

Viewer.js提供和Google Drive接近的基础图片查看体验，支持缩放、平移、旋转等功能：

• 引入依赖：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.11.0/dist/viewer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/viewerjs@1.11.0/dist/viewer.min.js"></script>
  

• 页面结构：

  <img id="target-img" src="https://storage.googleapis.com/your-bucket-name/your-image.jpg" alt="可缩放平移图片">
  

• 初始化配置：

  const viewer = new Viewer(document.getElementById('target-img'), {
    zoomRatio: 0.1,
    minZoomRatio: 0.1,
    maxZoomRatio: 10,
    movable: true,
    viewport: true,
    navbar: false,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      reset: 1
    }
  });
  

方案2：OpenSeadragon（适配超大图瓦片加载） #

如果是高清大图（如设计稿、地图），OpenSeadragon支持瓦片式加载，性能更优，匹配Google Drive大图查看体验：

• 预处理图片：用工具（如gdal2tiles.py）将原图切割为金字塔瓦片，上传至Google Storage；
• 引入依赖：

  <script src="https://cdn.jsdelivr.net/npm/openseadragon@4.1.0/build/openseadragon.min.js"></script>
  

• 页面容器：

  <div id="img-viewer" style="width: 100%; height: 80vh;"></div>
  

• 初始化加载：

  const viewer = OpenSeadragon({
    id: "img-viewer",
    prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@4.1.0/images/",
    tileSources: {
      type: "image",
      url: "https://storage.googleapis.com/your-bucket-name/tiled-image/pyramid.json"
    },
    zoomPerClick: 2,
    zoomPerScroll: 1.2,
    panHorizontal: true,
    panVertical: true
  });
  

三、部署到网站 #

• 将上述前端代码整合到网站页面，确保依赖资源可正常加载；
• 私有图片场景：后端需动态生成签名URL返回给前端。示例Node.js代码：

  const { Storage } = require('@google-cloud/storage');
  const storage = new Storage();
  const bucket = storage.bucket('your-bucket-name');
  const file = bucket.file('your-image.jpg');
  
  const options = {
    version: 'v4',
    action: 'read',
    expires: Date.now() + 15 * 60 * 1000 // 15分钟有效期
  };
  
  const [url] = await file.getSignedUrl(options);
  // 将url返回给前端替换图片src
  

• 测试验证：打开网站页面，确认图片加载正常，缩放、平移功能可用。

内容的提问来源于stack exchange，提问作者Marcos Camargo