本文作者：Marydon

原文链接：https://www.cnblogs.com/Marydon20210307/p/11486511.html
本文作者：Marydon
原文链接：https://www.cnblogs.com/Marydon20210307/p/11486511.htmlhttps://www.cnblogs.com/Marydon20210307/p/11486511.html1.情景展示1.情景展示
如上图所示，点击上传图片按钮，调用手机摄像头拍照功能。

我们知道现在，手机拍照在10MB左右，体积太大，在上传到服务器前，能不能只缩小图片的体积，而不改变图片尺寸？2.原因分析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);

};
}

/**
* 图片压缩
* @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.完整示例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);

};
}
// 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负责图片压缩处理。java负责图片压缩处理
补充：
图片优化方面可以考虑从以下几个方面着手：减小分辨率 >压缩图片>chrome使用webp格式写在最后
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充内容，欢迎留言！！！以上就是js 压缩图片的示例（只缩小体积，不更改图片尺寸）的详细内容，关于js 压缩图片的资料请关注其它相关文章！