js 压缩图片的示例(只缩小体积,不更改图片尺寸)


Posted in Javascript onOctober 21, 2020

本文作者:Marydon

原文链接:https://www.cnblogs.com/Marydon20170307/p/11486511.html

1.情景展示

js 压缩图片的示例(只缩小体积,不更改图片尺寸)

如上图所示,点击上传图片按钮,调用手机摄像头拍照功能。 

<input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" style="display: none;">

我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸?

2.原因分析

通过canvas实现对图片的重新绘制。 

代码展示:

/**
 * 图片压缩
 * @explain 借助canvas对图片进行重绘(canvas2DataURL)
 * @param base64Url base64格式的图片字符串
 * @param imgAttr  重绘图片宽度、高度、质量等属性的设置
 * @param callback 该函数执行完毕后,要执行的回调函数
 * @returns
 */
function photoCompress (base64Url, imgAttr, callback){
  var img = new Image();
  img.src = base64Url;
  img.onload = function(){
    var that = this;
    // 默认按比例压缩
    var w = that.width,
      h = that.height,
      // 宽高比例
      scale = w / h;
    w = imgAttr.width || w;
    h = imgAttr.height || (w / scale);
    // 默认图片质量为0.7
    var quality = 0.7;
    //生成canvas
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    // 创建属性节点
    var anw = document.createAttribute("width");
    anw.nodeValue = w;
    canvas.setAttributeNode(anw);
    var anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anh);
    ctx.drawImage(that, 0, 0, w, h);
    // 图像质量(0-1)
    if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
      quality = imgAttr.quality;
    }
    // 重绘后的图片类型
    var imgType = imgAttr.type || 'image/jpeg';
    // quality值越小,所绘制出的图像越模糊
    var base64 = canvas.toDataURL(imgType, quality);
    // 回调函数返回base64的值
    callback(base64);
  };
}

可自定义设置图片质量,图片的宽高(通过imgAttr设置)。

3.完整示例

// js 获取文件对象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
  alert("图像上传失败,请重试!");
}
// 文件读取对象
var reader = new FileReader();
// 图片转base64(Blob对象或File对象)
reader.readAsDataURL(fileObj);
// 图片大小<=1MB,size的单位:B(1Mb=1B*1024*1024)
if(fileObj.size/1024 <= 1024) {
  reader.onload = function(e) {
    // 获取对应的base64
    var imgBase64 = e.target.result;
    // 将图片的base64码传给后台
    // 调用腾讯接口
    $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
      // TODO 对返回的接口数据进行自动填充处理
    });
  };
} else {
  // 读取完毕
  reader.onload = function(){
    // 图片转换成为base64Url
    var fileBase64 = this.result;
    // 图片参数
    var imgAttr = {quality : 0.2, type : 'img/jpeg'};
    // 回调函数
    var callBack = function (base64Codes) {
      // 图片比较
      // 调用腾讯接口
       
    };
    // 压缩图片
    photoCompress(fileBase64,imgAttr,callBack);
  };
}

说明:

前端对图片进行重绘,对浏览器有一定的要求,我测试的时候在电脑端没有问题,但是,在微信上使用时,就会很难受了,会将微信的qq浏览器内核搞垮,根本无法使用。

不得以,放弃了在前端进行压缩的想法,转而直接将图片以流的形式提交至后台,由java负责图片压缩处理。

补充:

图片优化方面可以考虑从以下几个方面着手:减小分辨率 >压缩图片>chrome使用webp格式

写在最后

哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

以上就是js 压缩图片的示例(只缩小体积,不更改图片尺寸)的详细内容,更多关于js 压缩图片的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
Vue和Flask通信的实现
May 19 Vue.js
vue-cli4使用全局less文件中的变量配置操作
Oct 21 #Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 #Javascript
js 图片懒加载的实现
Oct 21 #Javascript
uniapp实现可以左右滑动导航栏
Oct 21 #Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
You might like
php生成图形验证码几种方法小结
2013/08/15 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
土木工程应届生自荐信
2013/09/24 职场文书
大课间活动制度
2014/01/18 职场文书
优秀幼教自荐信
2014/02/03 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python