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的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
浅谈小程序 setData学问多
Feb 20 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
桌面中心(一)创建数据库
2006/10/09 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP安全上传图片的方法
2015/03/21 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
Python3 socket同步通信简单示例
2017/06/07 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
党组织公开承诺书
2014/03/29 职场文书
热情服务标语
2014/10/07 职场文书
学校证明范文
2015/06/24 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS