canvas 等比例压缩图片

最新推荐文章于 2025-05-20 20:33:57 发布

weixin_30500105

最新推荐文章于 2025-05-20 20:33:57 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaoqiming/p/11016183.html

本文介绍了一种基于canvas的图片压缩方法，通过调整图片质量和尺寸来实现压缩，适用于前端开发中图片优化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 图片压缩，默认同比例压缩
compressImg (URL, callback) {
  // 生成canvas
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = URL
  let quality = 0.3
  image.onload = () => {
    canvas.width = image.width
    canvas.height = image.height
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
    let newImageData = canvas.toDataURL('image/jpeg', quality)
    callback(newImageData)
  }
}