实现思路

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

相关代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<input type="file" id="file">

<script>

    document.getElementById('file').addEventListener('change',function (e) {

        let fileObj = e.target.files[0]

        let that = this;

        compressFile(fileObj,function (files) {

            console.log(files)

            that.value = '' // 加不加都行，解决无法上传重复图片的问题。

        })

    })

    /**

     * 压缩图片

     * @param file input获取到的文件

     * @param callback 回调函数，压缩完要做的事，例如ajax请求等。

     */

    function compressFile(file,callback) {

        let fileObj = file;

        let reader = new FileReader()

        reader.readAsDataURL(fileObj) //转base64

        reader.onload = function(e) {

             let image = new Image() //新建一个img标签（还没嵌入DOM节点)

            image.src = e.target.result

            image.onload = function () {

                let canvas = document.createElement('canvas'), // 新建canvas

                    context = canvas.getContext('2d'),

                    imageWidth = image.width / 2,    //压缩后图片的大小

                    imageHeight = image.height / 2,

                    data = ''

                canvas.width = imageWidth

                canvas.height = imageHeight

                context.drawImage(image, 0, 0, imageWidth, imageHeight)

                data = canvas.toDataURL('image/jpeg') // 输出压缩后的base64

                let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob

                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                while (n--) {

                    u8arr[n] = bstr.charCodeAt(n);

                }

                let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 转成file

                callback(files) // 回调

            }

        }

    }

</script>

</body>

</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. ubuntu之路——day17.1 卷积操作的意义、边缘检测的示例、filter与padding的关系、卷积步长

    感谢吴恩达老师的公开课,以下图片均来自于吴恩达老师的公开课课件 为什么要进行卷积操作? 我们通过前几天的实验已经做了64*64大小的猫图片的识别. 在普通的神经网络上我们在输入层上输入的数据X的维数为 ...

  2. 在mybatis中写sql语句的一些体会

    本文会使用一个案例,就mybatis的一些基础语法进行讲解.案例中使用到的数据库表和对象如下: article表:这个表存放的是文章的基础信息 -- ------------------------- ...

  3. 数据库事务和spring事务的区别

    数据库事务和spring事务 本质上其实是同一个概念,spring的事务是对数据库的事务的封装,最后本质的实现还是在数据库,假如数据库不支持事务的话,spring的事务是没有作用的.数据库的事务说简单 ...

  4. java生成订单编号

    随着项目用户数量的扩大,高并发随之而来.那么如何在当前系统生成唯一编号呢? 一台数据库可以用自增,集群呢?当然也有随之的解决方案,但是最好的还是在项目生成了唯一的编号再插入到数据库.而不是数据库插入了 ...

  5. Harbor密码重置 密码修改 admin密码重置

    Harbor密码重置harbor现在是使用postgresql 数据库了.不再支持mysql,网上有N多重置Mysql密码的,可以略过了.我密码错了默认的Harbor12345 修改为: RedHat ...

  6. Theano入门

    由于自己的一个小项目需要Theano部分的开源代码,所以学习一下并记录入门的经典网站. 入门中文博客:https://blog.csdn.net/hjimce/article/details/4680 ...

  7. ref,out,int参数复习

    ref 结构是值类型,按值传递.通过关键字ref,也可以通过引用传递结构. public static void ChangeA(ref A a) { a.X = ; } //如果A是结构类型,就添加 ...

  8. 数组转JSON对象

    代码: function arrayToJson(arr){ var js={}; for(var i=0;i<arr.length;i++){ js[arr[i].name]=arr[i].v ...

  9. python中将已有链接的视频进行下载

    使用python爬取视频网站时,会得到一系列的视频链接,比如MP4文件.得到视频文件之后需要对视频进行下载,本文写出下载视频文件的函数. 首先导入requests库,安装库使用pip install ...

  10. JWT黑名单和白名单

    单点登录系统 单点登录系统保存了用户的登录名和密码,上网用户在单点登录系统中认证成功后,就可以直接登录各个业务系统. 1. 用户使用单点登录系统的登录界面,输入用户名和密码登录成功后, 单点登录系统为 ...