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统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue实现五子棋游戏
May 28 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php中JSON的使用与转换
2015/01/14 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python的函数的一些高阶特性
2015/04/27 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
职工趣味运动会方案
2014/02/10 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
消防工作实施方案
2014/06/09 职场文书
个人总结格式范文
2015/03/09 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python