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

 更新时间:2020年10月21日 14:23:50   作者:Marydon  
这篇文章主要介绍了js 压缩图片的示例,帮助大家利用js处理图片,完成特殊需求,感兴趣的朋友可以了解下

本文作者:Marydon

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

1.情景展示

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

  <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 压缩图片的资料请关注脚本之家其它相关文章!

相关文章

  • js实现简单的无缝轮播效果

    js实现简单的无缝轮播效果

    这篇文章主要为大家详细介绍了js实现简单的无缝轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Bootstrap的Refresh Icon也spin起来

    Bootstrap的Refresh Icon也spin起来

    本文通过实例给大家介绍Bootstrap的Refresh Icon相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • JavaScript 拖拽实例代码

    JavaScript 拖拽实例代码

    这篇文章主要介绍了JavaScript 拖拽实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • JS实现表格响应式布局技巧

    JS实现表格响应式布局技巧

    这篇文章主要为大家介绍了JS实现表格响应式布局技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
    2020-04-04
  • select标签设置默认选中的选项方法

    select标签设置默认选中的选项方法

    下面小编就为大家分享一篇select标签设置默认选中的选项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • javascript重复绑定事件造成的后果说明

    javascript重复绑定事件造成的后果说明

    最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来。拆解之后,发现了一些坑爹的问题。逻辑上没有问题的情况下,该出现的效果没有出现
    2013-03-03
  • 纯javascript移动优先的幻灯片效果

    纯javascript移动优先的幻灯片效果

    这篇文章主要介绍了纯javascript实现移动优先的幻灯片效果,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 你不知道的forEach函数解析

    你不知道的forEach函数解析

    这篇文章主要介绍了你不知道的forEach函数的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 整理关于Bootstrap表单的慕课笔记

    整理关于Bootstrap表单的慕课笔记

    这篇文章主要为大家整理了关于Bootstrap表单的慕课笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论