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

本文作者：Marydon

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

1.情景展示

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

　　我们知道现在，手机拍照在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);

									  };

									}