js实现上传并压缩图片效果


Posted in Javascript onJanuary 10, 2018

本文实例为大家分享了js实现上传并图片压缩的具体代码,供大家参考,具体内容如下

代码:

<!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 style="" 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,{width:200},function(base){
     
document.getElementById('img').setAttribute('src',base)
     });
    } 
  } 
 
  /**
   * 图片压缩,默认同比例压缩
   * @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 = 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
vue实现购物车案例
May 30 Javascript
web前端vue之CSS过渡效果示例
Jan 10 #Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 #Javascript
利用ECharts.js画K线图的方法示例
Jan 10 #Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 #Javascript
微信小程序实现传参数的几种方法示例
Jan 10 #Javascript
React中常见的动画实现的几种方式
Jan 10 #Javascript
使用async-validator编写Form组件的方法
Jan 10 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python Django框架实现自定义表单提交
2016/03/25 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python变量类型知识点总结
2019/02/18 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
教师旷工检讨书
2014/01/18 职场文书
食堂个人先进事迹
2014/01/22 职场文书
运动会入场解说词300字
2014/01/25 职场文书
质量标语大全
2014/06/12 职场文书
新闻传播专业求职信
2014/07/22 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers