JS图片压缩(pc端和移动端都适用)


Posted in Javascript onJanuary 12, 2017

最近在做移动端遇到了一个问题就是:手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊别慌,好事儿来了,务必就会有人去研究研究图片的压缩:

鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考:

/**
 * 图片压缩,默认同比例压缩
 * @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);
 }
}

当然返回的是一个base64的一个字符串;

如果可以试着测试一下压缩后的图片大小:

// 调用函数处理图片 







dealImage("路径", {
// 注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径(因为用take photo后的图片路径,我没有试成功(如果有人试成功了可以分享一下经验))
 width : 200
}, function(base){
//直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
 document.getElementById("transform").src = base;
 console.log("压缩后:" + base.length / 1024 + " " + base);


})

PS:主要思想就是获取到图片,利用H5 canvas技术进行图片数据化为 base64 的字符串,最后传到后台进行,后台将base64的字符串数据进行图像化储存。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
js 通用订单代码
Dec 23 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
javascript执行环境及作用域详解
May 05 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
原生js实现淘宝购物车功能
Jun 23 #Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 #Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 #Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
You might like
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP实现八皇后算法
2019/05/06 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
vue实例的选项总结
2020/06/09 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
python读取文件名并改名字的实例
2019/01/07 Python
python3实现逐字输出的方法
2019/01/23 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
司机的工作范围及职责
2013/11/13 职场文书
五一服装活动方案
2014/01/11 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
气象学专业个人求职信
2014/03/15 职场文书
学习两会精神心得范文
2014/03/17 职场文书
推普周活动总结
2014/08/28 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
企业委托书范本
2014/09/13 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
先进班集体事迹材料
2014/12/25 职场文书
离婚协议书格式范本
2016/03/18 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python