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中void(0)的具体含义解释
Aug 02 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英文求职信结束语大全
2013/10/26 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
大学三年的自我评价
2013/12/25 职场文书
运输服务质量承诺书
2014/03/27 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL