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 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
Vue动态获取width的方法
Aug 22 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
JavaScript函数柯里化
Nov 07 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
php一个找二层目录的小东东
2012/08/02 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Vue响应式原理详解
2017/04/18 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
P/Invoke是什么
2015/07/31 面试题
小学运动会口号
2014/06/07 职场文书
小学老师对学生的评语
2014/12/29 职场文书
安全责任书
2015/01/29 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
关于幸福的感言
2015/08/03 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js