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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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中的日期处理方法集锦
2007/01/02 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
AngularJS入门之动画
2016/07/27 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
授权委托书样本
2014/04/03 职场文书
《画》教学反思
2014/04/14 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers