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脚本学习 比较实用的基础
Sep 07 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
JS数组转字符串实现方法解析
Sep 04 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php分页函数示例代码分享
2014/02/24 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP asXML()函数讲解
2019/02/03 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
分页栏的web标准实现
2011/11/01 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python 如何引入协程和原理分析
2020/11/30 Python
大专学生推荐信范文
2013/11/19 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
美术教师自我鉴定
2014/02/12 职场文书
综合测评个人总结
2015/03/03 职场文书
面试通知单大全
2015/04/20 职场文书
元旦晚会开场白
2015/05/29 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android