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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
Javascript Objects详解
Sep 04 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
php创建类并调用的实例方法
2019/09/25 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
js面向对象编程总结
2017/02/16 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
js实现简单点赞操作
2020/03/17 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python可变参数函数用法实例
2015/07/07 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
商务英语专业毕业生自荐信
2013/11/05 职场文书
银行学习十八大感想
2014/01/11 职场文书
《木笛》教学反思
2014/03/01 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014最新实习证明模板
2014/10/02 职场文书
实习介绍信模板
2015/01/30 职场文书
世界地球日活动总结
2015/02/09 职场文书
观后感开头
2015/06/19 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis