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 相关文章推荐
jquery里的each使用方法详解
Dec 22 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
js给selected添加options的方法
May 06 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue生命周期的探索
Apr 03 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实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
控制打印时页眉角的代码
2007/02/08 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
javascript实现计算器功能
2020/03/30 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python实现汽车管理系统
2018/11/30 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2014年妇联工作总结
2014/11/21 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
个人党性分析总结
2015/03/05 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
使用python求解迷宫问题的三种实现方法
2022/03/17 Python