基于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 相关文章推荐
javascript创建和存储cookie示例
Jan 07 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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伪静态写法附代码
2008/06/20 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
详解python with 上下文管理器
2020/09/02 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
什么是GWT的Module
2013/01/20 面试题
采购员的工作职责
2013/12/26 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
班主任对学生的评语
2014/04/26 职场文书
师德演讲稿范文
2014/05/06 职场文书
运动会口号8字
2014/06/07 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技