基于JS实现前端压缩上传图片的实例代码


Posted in Javascript onMay 14, 2019

具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前端压缩上传图片</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="picFile" onchange="readFile(this)" />
  <img id="img" src="" alt="" />
  <script>
    function readFile(obj) {
      var file = obj.files[0];
      //判断类型是不是图片 
      if (!/image\/\w+/.test(file.type)) {
        alert("请确保文件为图像类型");
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        dealImage(this.result, { quality: 0.5 }, function(base) {
          //调用
          var blob = dataURLtoBlob(base);
          var newFile = new File([blob], file.name, { type: file.type });
          console.log(newFile)
          let r = new FileReader(); //本地预览
          r.onload = function() {
            $('#img').attr("src", r.result);;
          }
          r.readAsDataURL(newFile); //Base64
          // upload(newFile);
        });
      }
    }
    //将base64转换为blob
    function dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
    function upload(file) {
      var that = this;
      // 创建form对象
      let param = new FormData();
      // 通过append向form对象添加数据
      param.append('img', file);
      // 文件大小
      param.append('size', file.size);
      for (var n in that.params) {
        param.append(n, that.params[n]);
      }
      // 创建ajax
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
      xhr.open("POST", "yourapi", true);
      // 发送表单数据
      xhr.send(param);
    }
    /**
     * 图片压缩,默认同比例压缩
     * @param {Object} path
     * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
     * @param {Object} obj
     * obj 对象 有 width, height, quality(0-1)
     * @param {Object} callback
     * 回调函数有一个参数,base64的字符串数据
     */
    function dealImage(path, obj, callback) {
      var img = new Image();
      img.src = path;
      img.onload = function() {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = obj.quality || 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
          quality = obj.quality;
        }
        // quality值越小,所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
      }
    }
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于JS实现前端压缩上传图片的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JavaScript如何实现元素全排列实例代码
May 14 #Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 #Javascript
js中arguments对象的深入理解
May 14 #Javascript
ios中视频的最后一桢问题解决
May 14 #Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 #Javascript
vue项目中引入vue-datepicker插件的详解
May 14 #Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
js时间控件只显示年月
2017/01/08 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python缩进和冒号详解
2016/06/01 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python中sys模块是做什么用的
2020/08/16 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
高中家长意见怎么写
2015/06/03 职场文书
成事在人观后感
2015/06/16 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers