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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
学习ExtJS border布局
Oct 08 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
VSCode launch.json配置详细教程
Jun 18 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
超级简单的发送邮件程序
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php获取linux命令结果的实例
2017/03/13 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
python django事务transaction源码分析详解
2017/03/17 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
文秘大学生求职信
2014/02/25 职场文书
小学生环保标语
2014/06/13 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
MySQL锁机制
2021/04/05 MySQL
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android