Js利用Canvas实现图片压缩功能


Posted in Javascript onSeptember 13, 2017

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢。为此,需要对图片进行压缩处理来优化上传功能。以下是具体实现:

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

上面是一个图片压缩函数,返回 base64 格式的图片数据。 其中压缩比率取值(0 - 1 之间)越大图片质量越高。建议不要将图片转为 png 格式,因为转为 png 格式,图片的 base64 比转为 jpeg 的要长不少。下面是实际调用:

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

注意: 压缩方法的调用以及图片src赋值必须放在图片的 onload 方法里面。因为只有等图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值。 如果放在 onload 方法外面,则可能压缩代码无效,或者会生成一张纯黑色的图片。

以上这篇Js利用Canvas实现图片压缩功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
javascript实现密码验证
Nov 10 Javascript
理解javascript正则表达式
Mar 08 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 #Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 #Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 #Javascript
js数组实现权重概率分配
Sep 12 #Javascript
js 概率计算(简单版)
Sep 12 #Javascript
JavaScript面向对象精要(下部)
Sep 12 #Javascript
You might like
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
留学自荐信
2013/10/10 职场文书
2013年高中生自我评价
2013/10/23 职场文书
社会实践感言
2014/01/25 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
辞职信如何写
2015/02/27 职场文书
暑假安全保证书
2015/02/28 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python
MySQL数据管理操作示例讲解
2022/12/24 MySQL