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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
ant design 日期格式化的实现
Oct 27 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 output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php制作简单模版引擎
2016/04/07 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
Angularjs的键盘事件的绑定
2017/07/27 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
详解python3百度指数抓取实例
2016/12/12 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
日期和时间问题
2015/01/04 面试题
2014年领导班子专项整治整改方案
2014/09/28 职场文书
内勤岗位职责范本
2015/04/13 职场文书
公司欠款证明
2015/06/24 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
关于的python五子棋的算法
2022/05/02 Python