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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
react-native封装插件swiper的使用方法
Mar 20 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python3.8中使用f-strings调试
2019/05/22 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
应届大学生求职信
2013/12/01 职场文书
三八节主持词
2014/03/17 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
运动会广播稿100字
2015/08/19 职场文书
Python打包为exe详细教程
2021/05/18 Python
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android