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

本文作者：Marydon

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

1.情景展示

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

<input onchange='javascript:imgFun.uploadPicture();' type='file' name='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 压缩图片的资料请关注好吧啦网其它相关文章！