实现思路

  • 获取input的file
  • 使用fileReader() 将图片转为base64
  • 使用canvas读取base64 并降低分辨率
  • 把canvas数据转成blob对象
  • 把blob对象转file对象
  • 完成压缩

相关代码：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11. <input type="file" id="file">
  12. <script>
  13.     document.getElementById('file').addEventListener('change',function (e) {
  14.         let fileObj = e.target.files[0]
  15.         let that = this;
  16.         compressFile(fileObj,function (files) {
  17.             console.log(files)
  18.  
  19.             that.value = '' // 加不加都行，解决无法上传重复图片的问题。
  20.  
  21.         })
  22.  
  23.     })
  24.  
  25.     /**
  26.      * 压缩图片
  27.      * @param file input获取到的文件
  28.      * @param callback 回调函数，压缩完要做的事，例如ajax请求等。
  29.      */
  30.     function compressFile(file,callback) {
  31.         let fileObj = file;
  32.         let reader = new FileReader()
  33.         reader.readAsDataURL(fileObj) //转base64
  34.         reader.onload = function(e) {
  35.              let image = new Image() //新建一个img标签（还没嵌入DOM节点)
  36.             image.src = e.target.result
  37.             image.onload = function () {
  38.                 let canvas = document.createElement('canvas'), // 新建canvas
  39.                     context = canvas.getContext('2d'),
  40.                     imageWidth = image.width / 2,    //压缩后图片的大小
  41.                     imageHeight = image.height / 2,
  42.                     data = ''
  43.                 canvas.width = imageWidth
  44.                 canvas.height = imageHeight
  45.                 context.drawImage(image, 0, 0, imageWidth, imageHeight)
  46.                 data = canvas.toDataURL('image/jpeg') // 输出压缩后的base64
  47.                 let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
  48.                     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  49.                 while (n--) {
  50.                     u8arr[n] = bstr.charCodeAt(n);
  51.                 }
  52.                 let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 转成file
  53.                 callback(files) // 回调
  54.             }
  55.         }
  56.     }
  57. </script>
  58. </body>
  59. </html>

最后回调函数中的files可以直接当做正常的input file 使用，如果后续涉及到ajax，可以直接放到formData() 里。

本例除文中源码外，不另外提供源码。

参考地址1：https://blog.csdn.net/yasha97/article/details/83629057
参考地址2：https://blog.csdn.net/yasha97/article/details/83629510

在原文章基础上添加了blob => file的对象转化。

JavaScript前端图片压缩的更多相关文章

  1. 基于canvas的前端图片压缩

    /*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...

  2. 前端图片压缩(纯js)

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  3. 前端图片压缩上传(纯js的质量压缩，非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  4. js 前端图片压缩+ios图片角度旋转

    step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...

  5. 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）

    https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...

  6. 前端通过canvas实现图片压缩

    在一次的项目中,需要用户上传图片,目前市场随便一个手机拍出来的照片都是好几兆,直接上传特别占用带宽,影响用户体验,所以要求对用户上传图片进行压缩后再上传:那么前端怎么实现这个功能呢? 亲测可将4M图片 ...

  7. 石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_190 我们知道,在前端界有一个共识:速度就是生命,带宽就是金钱.怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题,目 ...

  8. 前端构建工具之gulp（一）「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  9. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

随机推荐

  1. docker容器启动后添加端口映射

    DOCKER 给运行中的容器添加映射端口 方法1 1.获得容器IP 将container_name 换成实际环境中的容器名 docker inspect `container_name` | grep ...

  2. 解决'python -m pip install --upgrade pip' 报错问题

    再安装包的时候提示 You are using pip version 9.0.3, however version 10.0.1 is available.You should consider u ...

  3. Service与Activity通信 回调方式***

    要实现service与activity的高强度通信用什么方法? service与activity之前的通信方式有很多,回调接口方式.观察者模式.广播.还有handler等,方法有很多,但要高强度地通信 ...

  4. git 项目最常用命令总结

    本文为博主原创,未经允许不得转载: 1.查看git基础配置信息 1.查看用户名和邮箱地址 git config user.name   git config user.email 2.修改用户名和邮箱 ...

  5. JS执行——Promise

    https://www.jianshu.com/p/b16e7c9e1f9f Promise Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大.它最早由社 ...

  6. Redis 密码设置 及 带密码访问

    转: Redis 密码设置 如果不加密码,默认只能本机访问,加密码也是为了安全考虑 1.进入Redis 的安装目录,找到redis.conf文件.用vi命令打开文件 输入  / requirepass ...

  7. Python高级笔记（九）Python使用MySQL

    1. MySQL基本使用 1.1 数据库简介 Mysql: 关系型数据库,做网站 redis:当作缓存 mongodb:非关系型数据库,做爬虫 SQL语句: DQL:数据查询语言,用于对数据进行查询, ...

  8. MD5（3）

    import java.io.UnsupportedEncodingException; import java.security.PrivateKey; import java.security.S ...

  9. Linux中搜索大于200M的文件

    Linux中清理磁盘空间时,经常需要找出大于200M的文件. 这个命令可以实现这个功能: find / -size +200M -exec du -h {} \;

  10. 170道python面试题（转）

    作者:麋鹿链接:https://www.zhihu.com/question/54513391/answer/779646691来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...