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下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript数组的使用
Mar 28 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP加密解密实例分析
2015/12/25 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
JS类的封装及实现代码
2009/12/02 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python队列原理及实现方法示例
2019/11/27 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
文员个人求职自荐信
2013/09/21 职场文书
领导检查欢迎词
2014/01/14 职场文书
文明村镇申报材料
2014/05/06 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
用电申请报告范文
2015/05/18 职场文书
四群教育工作总结
2015/08/10 职场文书
送给客户微信问候语!
2019/07/04 职场文书