JavaScript前端实现压缩图片功能


Posted in Javascript onMarch 06, 2020

为什么要前端来压缩图片

最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节。

压缩效果

JavaScript前端实现压缩图片功能

首先介绍下压缩的大概流程

  • 通过原生的input标签拿到要上传的图片文件
  • 将图片文件转化成img元素标签
  • 在canvas上压缩绘制该HTMLImageElement
  • 将canvas绘制的图像转成blob文件
  • 最后将该blob文件传到服务端
  • 完成!

接下来看下详细步骤

考虑到文章和步骤的完整性,所以我会把每个细节都写出来,即使有些东西很基础。

1.  使用Input标签来获取图片文件资源

这一步大家应该最熟悉不过了吧,原生input标签,通过设置 type 属性为file来让用户可以选择文件,设置 accept 限制选择的文件类型,绑定onchange事件,来获取确认选择后的文件

<input type="file" accept="image/*" />

点击控件,触发焦点,打开文件资源管理器,选中文件并确认后,会触发change事件,所以可以在change事件的回调中获取选中文件,它长这个样

JavaScript前端实现压缩图片功能

2. 读取文件转成img标签元素

拿到图片文件后,先将其转成HTMLImageElement,也就是普通的img标签,具体要使用 FileReader构造函数。

先new出来一个img和fileReader的实例,通过fileReader的 readAsDataURL这个api,来读取图片文件,其返回值是一个编码后的base64的字符串,然后将这个字符串赋值给img的src属性上,这样就完成了图片文件到 HTMLImageElement的转化。

// 先new一个img和fileReader的实例
const img = new Image()
const reader = new FileReader()// 读取文件资源
reader.readAsDataURL(file) 
reader.onload = function(e){ 
 img.src = e.target.result
}

转化的HTMLImageElement

JavaScript前端实现压缩图片功能

3. canvas压缩,核心步骤

拿到转化后的img元素后,先取出该元素的宽高度,这个宽高度就是实际图片文件的宽高度。

const { width: originWidth, height: originHeight } = img

然后定义一个最大限度的宽高度,如果超过这个限制宽高度,则进行等比例的缩放

// 最大尺寸限制
 const maxWidth = 1000,maxHeihgt = 1000
 // 需要压缩的目标尺寸
 let targetWidth = originWidth, 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实例,设置canvas的宽高度为压缩计算后的尺寸,并将img绘制到上面

// 创建画布
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')

// 设置宽高度为等同于要压缩图片的尺寸
 canvas.width = targetWidth
 canvas.height = targetHeight
 context.clearRect(0, 0, targetWidth, targetHeight)
 //将img绘制到画布上
 context.drawImage(img, 0, 0, targetWidth, targetHeight)

4. 转成blob文件

canvas绘制完成后,就可以使用 toBlob来将图像转成blob文件了,这个api接受三个入参

canvas.toBlob(callback, type, encoderOptions);

回调函数中可以得到转化后的blob文件,type为要转成的图片类型,默认png。

encoderOptions为当设置的图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。

所以如果我们只是要压缩jpg或者webp格式的图片的话,不需要进行第3部的操作,直接使用这个api,然后填入想要的质量参数就可以了。但实际上,我们还是要考虑多种的图片格式,因此很有必要使用第三部的过程。

转成的blob长这个样子

JavaScript前端实现压缩图片功能

5. 将blob上传,大功告成。

完整的代码实现

因为整个过程中都存在着异步回调操作,所以我使用了async,实现异步代码的同步执行

// 压缩前将file转换成img对象
function readImg(file) {
 return new Promise((resolve, reject) => {
  const img = new Image()
  const reader = new FileReader()
  reader.onload = function(e) {
   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)
  }
 })
}
/**
 * 压缩图片
 *@param img 被压缩的img对象
 * @param type 压缩后转换的文件类型
 * @param mx 触发压缩的图片最大宽度限制
 * @param mh 触发压缩的图片最大高度限制
 */
function compressImg(img, type, mx, mh) {
 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') })
}

大致执行过程,具体可根据需求,自行改动

async function upload(file){
  const img = await readImg(file)
  const blob = await compressImg(img, file.type, 1000, 1000)
  const formData = new FormData()
  formData.append('file', blob, 'xxx.jpg')
  axios.post('http://xxx.com/api',formData)
}
upload(file).catch(e => console.log(e))

到此这篇关于JavaScript前端实现压缩图片功能的文章就介绍到这了,更多相关JavaScript 压缩图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 #Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
vue 动态组件用法示例小结
Mar 06 #Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 #Javascript
You might like
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
原生js实现轮播图
2017/02/27 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python实现处理管道的方法
2015/06/04 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
介绍一下write命令
2014/08/10 面试题
Linux文件系统类型
2012/09/16 面试题
电子专业毕业生自荐信
2014/05/25 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
自我检讨书范文
2015/01/28 职场文书
中学教师个人总结
2015/02/10 职场文书
岗位聘任协议书
2015/09/21 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书