文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

开箱即用的前端图片压缩方案

2024-11-30 05:26

关注

图片

那么作为技术人, 当然也有一堆的解决方案, 比如:

当然聪明的小伙伴也会将上面的方案组合, 设计更优秀的图片“提速”方案.

今天不会和大家把所有方案都介绍一遍, 因为网上也有很多实践, 接下来会从前端技术提升的角度, 分享一下如何用原生 javascript, 实现从图片上传到图片自定义压缩的完整方案. 大家可以把文章中介绍的方案直接用于自己的实际开发中, 或者基于它设计更棒的图片压缩方案.

图片

实现图片压缩的方案

前端实现图片压缩无非就是在用户上传图片文件后, 将file转换成image对象, 然后再利用canvas 及其 api 将图片压缩成指定体积. 如下流程:

图片

代码实现

首先我们先实现将file转换成image对象, 这里我们用到了FileReader API, 代码如下:

// 压缩前将file转换成img对象
function readImg(file:File) {
    return new Promise((resolve, reject) => {
     const img = new Image()
     const reader = new FileReader()
     reader.onload = function(e:any) {
      img.src = e.target.result
     }
     reader.onerror = function(e) {
      reject(e)
     }
     reader.readAsDataURL(file)
     img.onload = function() {
      resolve(img)
     }
     img.onerror = function(e) {
      reject(e)
     }
    })
}

这里使用 promise 来设计生成图片数据的方法, 接下来我们看看核心的图片压缩源码:


 function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) {
    return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     const { width: originWidth, height: originHeight } = img
     // 最大尺寸限制
     const maxWidth = mx
     const maxHeight = mh
     // 目标尺寸
     let targetWidth = originWidth
     let targetHeight = originHeight
     if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
       // 宽图片
       targetWidth = maxWidth
       targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
       // 高图片
       targetHeight = maxHeight
       targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
     }
     canvas.width = targetWidth
     canvas.height = targetHeight
     context?.clearRect(0, 0, targetWidth, targetHeight)
     // 图片绘制
     context?.drawImage(img, 0, 0, targetWidth, targetHeight)
     canvas.toBlob(function(blob) {
      resolve(blob)
     }, type || 'image/png', quality) 
    })
}

这里通过控制 canvas的宽高, 以及对 canvas 的 toBlob设置参数, 来实现自定义的图片压缩.

如果大家对代码又不理解的地方, 也可以在文末发表问题, 我会做对应的解答.

来源:趣谈前端内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯