图片尺寸调整

工具简介：图片尺寸调整工具

专业的在线图片尺寸调整工具，支持多种调整模式和高质量的图片处理。无需安装任何软件，直接在浏览器中完成图片的缩放、压缩和优化。

什么是图片尺寸调整工具？

图片尺寸调整用于调整图片尺寸与比例，便于快速预览并导出结果。

如何使用

1. 上传图片或输入相关内容。
2. 设置尺寸、质量、格式或效果参数。
3. 预览效果并下载结果。

常见应用场景

• 网页与应用素材的体积优化
• 设计稿导出与格式转换
• 社媒或电商图片的快速处理

❓ 常见问题 FAQ

Q1：压缩后模糊怎么办？
A：适当提高质量或减小压缩比例。

Q2：如何保留透明背景？
A：选择支持透明通道的格式，如 PNG 或 WebP。

Q3：可以批量处理吗？
A：若提供批量模式可分次处理以保证稳定。

🎯 主要功能

多种调整模式

• 按比例缩放: 保持原始宽高比，按百分比缩放
• 自定义尺寸: 精确设置目标宽度和高度
• 最大尺寸限制: 在指定范围内自动适配最佳尺寸

高级选项

• 质量控制: 10%-100% 可调节压缩质量
• 宽高比锁定: 自动保持图片比例不变形
• 实时预览: 即时查看调整效果
• 批量处理: 支持多种图片格式

📋 支持格式

输入格式

• JPEG/JPG: 最常用的照片格式
• PNG: 支持透明背景的图片
• GIF: 动态图片和静态图片
• WebP: 现代高效的图片格式
• BMP: Windows 位图格式

输出优化

• 自动保持原始格式
• 智能压缩算法
• 最小化文件大小
• 保持视觉质量

💡 使用场景

1. 网站图片优化

// 网站图片优化最佳实践
const imageOptimization = {
  // 不同用途的推荐尺寸
  thumbnails: {
    size: '150x150',
    quality: 80,
    description: '缩略图，快速加载'
  },
  
  productImages: {
    size: '800x600',
    quality: 85,
    description: '产品展示图，平衡质量与大小'
  },
  
  banners: {
    size: '1920x600',
    quality: 90,
    description: '横幅图片，高质量展示'
  },
  
  avatars: {
    size: '200x200',
    quality: 75,
    description: '用户头像，圆形裁剪友好'
  }
}

// 自动化图片处理流程
class ImageProcessor {
  constructor() {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
  }

  // 智能调整图片尺寸
  async smartResize(file, targetWidth, targetHeight, quality = 0.8) {
    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        // 计算最佳尺寸
        const { width, height } = this.calculateOptimalSize(
          img.width, 
          img.height, 
          targetWidth, 
          targetHeight
        )
        
        // 设置画布尺寸
        this.canvas.width = width
        this.canvas.height = height
        
        // 绘制调整后的图片
        this.ctx.drawImage(img, 0, 0, width, height)
        
        // 输出优化后的图片
        this.canvas.toBlob(resolve, file.type, quality)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(file)
    })
  }

  // 计算最佳尺寸
  calculateOptimalSize(originalWidth, originalHeight, maxWidth, maxHeight) {
    const widthRatio = maxWidth / originalWidth
    const heightRatio = maxHeight / originalHeight
    const ratio = Math.min(widthRatio, heightRatio, 1)
    
    return {
      width: Math.round(originalWidth * ratio),
      height: Math.round(originalHeight * ratio)
    }
  }

  // 批量处理图片
  async batchProcess(files, options) {
    const results = []
    
    for (const file of files) {
      try {
        const processedBlob = await this.smartResize(
          file,
          options.maxWidth,
          options.maxHeight,
          options.quality
        )
        
        results.push({
          original: file,
          processed: processedBlob,
          compressionRatio: (1 - processedBlob.size / file.size) * 100,
          success: true
        })
      } catch (error) {
        results.push({
          original: file,
          error: error.message,
          success: false
        })
      }
    }
    
    return results
  }
}

// 使用示例
const processor = new ImageProcessor()

// 处理产品图片
const productFiles = document.getElementById('productImages').files
const productResults = await processor.batchProcess(productFiles, {
  maxWidth: 800,
  maxHeight: 600,
  quality: 0.85
})

console.log('产品图片处理完成:', productResults)

2. 社交媒体图片适配

// 社交媒体平台图片规格
const socialMediaSpecs = {
  instagram: {
    post: { width: 1080, height: 1080, ratio: '1:1' },
    story: { width: 1080, height: 1920, ratio: '9:16' },
    reel: { width: 1080, height: 1920, ratio: '9:16' }
  },
  
  facebook: {
    post: { width: 1200, height: 630, ratio: '1.91:1' },
    cover: { width: 1640, height: 859, ratio: '1.91:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  },
  
  twitter: {
    post: { width: 1200, height: 675, ratio: '16:9' },
    header: { width: 1500, height: 500, ratio: '3:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  },
  
  linkedin: {
    post: { width: 1200, height: 627, ratio: '1.91:1' },
    cover: { width: 1584, height: 396, ratio: '4:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  }
}

// 社交媒体图片适配器
class SocialMediaAdapter {
  constructor() {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
  }

  // 适配指定平台和类型
  async adaptForPlatform(imageFile, platform, type) {
    const spec = socialMediaSpecs[platform]?.[type]
    if (!spec) {
      throw new Error(`不支持的平台或类型: ${platform}-${type}`)
    }

    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        this.canvas.width = spec.width
        this.canvas.height = spec.height
        
        // 计算居中裁剪参数
        const { sx, sy, sw, sh } = this.calculateCenterCrop(
          img.width, 
          img.height, 
          spec.width, 
          spec.height
        )
        
        // 绘制适配后的图片
        this.ctx.drawImage(
          img, 
          sx, sy, sw, sh,
          0, 0, spec.width, spec.height
        )
        
        // 输出适配后的图片
        this.canvas.toBlob(resolve, 'image/jpeg', 0.9)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(imageFile)
    })
  }

  // 计算居中裁剪参数
  calculateCenterCrop(imgWidth, imgHeight, targetWidth, targetHeight) {
    const imgRatio = imgWidth / imgHeight
    const targetRatio = targetWidth / targetHeight
    
    let sw, sh, sx, sy
    
    if (imgRatio > targetRatio) {
      // 图片更宽，按高度缩放
      sh = imgHeight
      sw = imgHeight * targetRatio
      sx = (imgWidth - sw) / 2
      sy = 0
    } else {
      // 图片更高，按宽度缩放
      sw = imgWidth
      sh = imgWidth / targetRatio
      sx = 0
      sy = (imgHeight - sh) / 2
    }
    
    return { sx, sy, sw, sh }
  }

  // 批量适配多个平台
  async batchAdapt(imageFile, platforms) {
    const results = {}
    
    for (const [platform, types] of Object.entries(platforms)) {
      results[platform] = {}
      
      for (const type of types) {
        try {
          const adaptedBlob = await this.adaptForPlatform(imageFile, platform, type)
          results[platform][type] = {
            blob: adaptedBlob,
            url: URL.createObjectURL(adaptedBlob),
            success: true
          }
        } catch (error) {
          results[platform][type] = {
            error: error.message,
            success: false
          }
        }
      }
    }
    
    return results
  }
}

// 使用示例
const adapter = new SocialMediaAdapter()

// 适配多个社交媒体平台
const originalImage = document.getElementById('imageInput').files[0]
const adaptResults = await adapter.batchAdapt(originalImage, {
  instagram: ['post', 'story'],
  facebook: ['post', 'cover'],
  twitter: ['post', 'header']
})

console.log('社交媒体适配完成:', adaptResults)

3. 移动端图片优化

// 移动端图片优化策略
class MobileImageOptimizer {
  constructor() {
    this.devicePixelRatio = window.devicePixelRatio || 1
    this.connectionType = this.getConnectionType()
  }

  // 获取网络连接类型
  getConnectionType() {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
    return connection ? connection.effectiveType : '4g'
  }

  // 根据设备和网络条件优化图片
  getOptimizationSettings(originalWidth, originalHeight) {
    const settings = {
      '2g': { scale: 0.3, quality: 0.6 },
      '3g': { scale: 0.5, quality: 0.7 },
      '4g': { scale: 0.8, quality: 0.8 },
      'slow-2g': { scale: 0.2, quality: 0.5 }
    }
    
    const setting = settings[this.connectionType] || settings['4g']
    
    return {
      width: Math.round(originalWidth * setting.scale * this.devicePixelRatio),
      height: Math.round(originalHeight * setting.scale * this.devicePixelRatio),
      quality: setting.quality
    }
  }

  // 智能优化图片
  async optimizeForMobile(imageFile) {
    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        const settings = this.getOptimizationSettings(img.width, img.height)
        
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        
        canvas.width = settings.width
        canvas.height = settings.height
        
        // 使用高质量缩放算法
        ctx.imageSmoothingEnabled = true
        ctx.imageSmoothingQuality = 'high'
        
        ctx.drawImage(img, 0, 0, settings.width, settings.height)
        
        canvas.toBlob(resolve, 'image/jpeg', settings.quality)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(imageFile)
    })
  }

  // 生成响应式图片集
  async generateResponsiveSet(imageFile) {
    const sizes = [
      { name: 'small', width: 480, quality: 0.7 },
      { name: 'medium', width: 768, quality: 0.8 },
      { name: 'large', width: 1200, quality: 0.85 },
      { name: 'xlarge', width: 1920, quality: 0.9 }
    ]
    
    const results = {}
    
    for (const size of sizes) {
      try {
        const optimizedBlob = await this.resizeToWidth(imageFile, size.width, size.quality)
        results[size.name] = {
          blob: optimizedBlob,
          url: URL.createObjectURL(optimizedBlob),
          width: size.width,
          size: optimizedBlob.size
        }
      } catch (error) {
        console.error(`生成 ${size.name} 尺寸失败:`, error)
      }
    }
    
    return results
  }

  // 按宽度调整图片
  async resizeToWidth(imageFile, targetWidth, quality) {
    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        const ratio = targetWidth / img.width
        const targetHeight = Math.round(img.height * ratio)
        
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        
        canvas.width = targetWidth
        canvas.height = targetHeight
        
        ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
        canvas.toBlob(resolve, imageFile.type, quality)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(imageFile)
    })
  }
}

// 使用示例
const mobileOptimizer = new MobileImageOptimizer()

// 优化单张图片
const mobileImage = await mobileOptimizer.optimizeForMobile(originalFile)

// 生成响应式图片集
const responsiveSet = await mobileOptimizer.generateResponsiveSet(originalFile)
console.log('响应式图片集:', responsiveSet)

🔧 技术特点

客户端处理

• 隐私保护: 图片不上传服务器，本地处理
• 即时处理: 无需等待上传下载
• 离线可用: 支持离线使用
• 无限制: 不限制文件大小和数量

高质量算法

• 双线性插值: 平滑的缩放效果
• 锐化处理: 保持图片清晰度
• 色彩保真: 维持原始色彩空间
• 边缘优化: 减少锯齿和模糊

⚠️ 使用建议

1. 质量设置: 网页用图建议 70-85%，打印用图建议 90-95%
2. 尺寸选择: 根据实际显示需求选择合适尺寸，避免过度缩放
3. 格式选择: 照片用 JPEG，图标用 PNG，动画用 GIF
4. 批量处理: 相同规格的图片可以批量处理提高效率

📱 移动端优化

• 响应式界面设计
• 触摸友好的操作
• 自适应屏幕尺寸
• 优化的加载性能