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 匿名函数及其代码模式原理
Mar 19 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 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创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
高三毕业生自我鉴定
2013/12/20 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
党员教师一句话承诺
2014/05/30 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
科技活动总结范文
2015/05/11 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang