js 压缩图片的示例（只缩小体积，不更改图片尺寸）

本文作者：Marydon

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

1.情景展示

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

　　 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 压缩图片的资料请关注考高分网其它相关文章！