如何用JS有效的压缩图片

目录

• 前言
• 转化关系
• 具体实现

• file2DataUrl(file, callback)
• file2Image(file, callback)
• url2Image(url, callback)
• image2Canvas(image)
• canvas2DataUrl(canvas, quality, type)
• dataUrl2Image(dataUrl, callback)
• dataUrl2Blob(dataUrl, type)
• canvas2Blob(canvas, callback, quality, type)
• blob2DataUrl(blob, callback)
• blob2Image(blob, callback)
• upload(url, file, callback)

function file2DataUrl(file, callback) {
 var reader = new FileReader();
  reader.onload = function () {
    callback(reader.result);
  };
  reader.readAsDataURL(file);
}

data:<mediatype>,<data>

function file2Image(file, callback) {
 var image = new Image();
 var URL = window.webkitURL || window.URL;
 if (URL) {
 var url = URL.createObjectURL(file);
    image.onload = function() {
      callback(image);
      URL.revokeObjectURL(url);
    };
    image.src = url;
  } else {
    inputFile2DataUrl(file, function(dataUrl) {
      image.onload = function() {
        callback(image);
      }
      image.src = dataUrl;
    });
  }
}

function url2Image(url, callback) {
 var image = new Image();
  image.src = url;
  image.onload = function() {
    callback(image);
  }
}

function image2Canvas(image) {
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 return canvas;
}

function canvas2DataUrl(canvas, quality, type) {
 return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}

function dataUrl2Image(dataUrl, callback) {
 var image = new Image();
  image.onload = function() {
    callback(image);
  };
  image.src = dataUrl;
}

function dataUrl2Blob(dataUrl, type) {
 var data = dataUrl.split(',')[1];
 var mimePattern = /^data:(.*?)(;base64)?,/;
 var mime = dataUrl.match(mimePattern)[1];
 var binStr = atob(data);
 var arr = new Uint8Array(len);
 for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
 return new Blob([arr], {type: type || mime});
}

function canvas2Blob(canvas, callback, quality, type){
  canvas.toBlob(function(blob) {
    callback(blob);
  }, type || 'image/jpeg', quality || 0.8);
}

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {
 let dataUrl = this.toDataURL(type, quality);
    callback(dataUrl2Blob(dataUrl));
  }
 });
}

function blob2DataUrl(blob, callback) {
  file2DataUrl(blob, callback);
}

function blob2Image(blob, callback) {
  file2Image(blob, callback);
}

function upload(url, file, callback) {
 var xhr = new XMLHttpRequest();
 var fd = new FormData();
  fd.append('file', file);
  xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
 // 上传成功
      callback && callback(xhr.responseText);
    } else {
 throw new Error(xhr);
    }
  }
  xhr.open('POST', url, true);
  xhr.send(fd);
}

function upload(url, file) {
 var reader = new FileReader();
 var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
  reader.onload = function() {
    xhr.send(reader.result);
  };
  reader.readAsBinaryString(file);
}

/**
 * 简易图片压缩方法
 * @param {Object} options 相关参数
 */
(function (win) {
 var REGEXP_IMAGE_TYPE = /^image\//;
 var util = {};
 var defaultOptions = {
    file: null,
    quality: 0.8
  };
 var isFunc = function (fn) { return typeof fn === 'function'; };
 var isImageType = function (value) { return REGEXP_IMAGE_TYPE.test(value); };
 /**
   * 简易图片压缩构造函数
   * @param {Object} options 相关参数
   */
 function SimpleImageCompressor(options) {
    options = Object.assign({}, defaultOptions, options);
 this.options = options;
 this.file = options.file;
 this.init();
  }
 var _proto = SimpleImageCompressor.prototype;
  win.SimpleImageCompressor = SimpleImageCompressor;
 /**
   * 初始化
   */
  _proto.init = function init() {
 var _this = this;
 var file = this.file;
 var options = this.options;
 if (!file || !isImageType(file.type)) {
      console.error('请上传图片文件!');
 return;
    }
 if (!isImageType(options.mimeType)) {
      options.mimeType = file.type;
    }
    util.file2Image(file, function (img) {
 var canvas = util.image2Canvas(img);
      file.width = img.naturalWidth;
      file.height = img.naturalHeight;
      _this.beforeCompress(file, canvas);
      util.canvas2Blob(canvas, function (blob) {
        blob.width = canvas.width;
        blob.height = canvas.height;
        options.success && options.success(blob);
      }, options.quality, options.mimeType)
    })
  }
 /**
   * 压缩之前，读取图片之后钩子函数
   */
  _proto.beforeCompress = function beforeCompress() {
 if (isFunc(this.options.beforeCompress)) {
 this.options.beforeCompress(this.file);
    }
  }
 // 省略 `util` 公用方法定义
 // ...
 // 将 `util` 公用方法添加到实例的静态属性上
 for (key in util) {
 if (util.hasOwnProperty(key)) {
      SimpleImageCompressor[key] = util[key];
    }
  }
})(window)

var fileEle = document.getElementById('file');
fileEle.addEventListener('change', function () {
  file = this.files[0];
 var options = {
    file: file,
    quality: 0.6,
    mimeType: 'image/jpeg',
 // 压缩前回调
    beforeCompress: function (result) {
      console.log('压缩之前图片尺寸大小: ', result.size);
      console.log('mime 类型: ', result.type);
 // 将上传图片在页面预览
 // SimpleImageCompressor.file2DataUrl(result, function (url) {
 //   document.getElementById('origin').src = url;
 // })
    },
 // 压缩成功回调
    success: function (result) {
      console.log('压缩之后图片尺寸大小: ', result.size);
      console.log('mime 类型: ', result.type);
      console.log('压缩率： ', (result.size / file.size * 100).toFixed(2) + '%');
 // 生成压缩后图片在页面展示
 // SimpleImageCompressor.file2DataUrl(result, function (url) {
 //   document.getElementById('output').src = url;
 // })
 // 上传到远程服务器
 // SimpleImageCompressor.upload('/upload.png', result);
    }
  };
 new SimpleImageCompressor(options);
}, false);

var aspectRatio = naturalWidth / naturalHeight;
var width = Math.max(options.width, 0) || naturalWidth;
var height = Math.max(options.height, 0) || naturalHeight;
if (height * aspectRatio > width) {
  height = width / aspectRatio;
} else {
  width = height * aspectRatio;
}

function image2Canvas(image, destWidth, destHeight) {
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
  canvas.width = destWidth || image.naturalWidth;
  canvas.height = destHeight || image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 return canvas;
}

// `png` 格式图片大小超过 `convertSize`, 转化成 `jpeg` 格式
if (file.size > options.convertSize && options.mimeType === 'image/png') {
  options.mimeType = 'image/jpeg';
}
// 省略一些代码
// ...
// 用户期待的输出宽高没有大于源图片的宽高情况下，输出文件大小大于源文件，返回源文件
if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  result = file;
}

// ...
// 限制最小和最大宽高
var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || Infinity;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;
if (maxWidth < Infinity && maxHeight < Infinity) {
 if (maxHeight * aspectRatio > maxWidth) {
    maxHeight = maxWidth / aspectRatio;
  } else {
    maxWidth = maxHeight * aspectRatio;
  }
} else if (maxWidth < Infinity) {
  maxHeight = maxWidth / aspectRatio;
} else if (maxHeight < Infinity) {
  maxWidth = maxHeight * aspectRatio;
}
if (minWidth > 0 && minHeight > 0) {
 if (minHeight * aspectRatio > minWidth) {
    minHeight = minWidth / aspectRatio;
  } else {
    minWidth = minHeight * aspectRatio;
  }
} else if (minWidth > 0) {
  minHeight = minWidth / aspectRatio;
} else if (minHeight > 0) {
  minWidth = minHeight * aspectRatio;
}
width = Math.floor(Math.min(Math.max(width, minWidth), maxWidth));
height = Math.floor(Math.min(Math.max(height, minHeight), maxHeight));
// ...
// 覆盖默认填充颜色 (#000)
var fillStyle = 'transparent';
context.fillStyle = fillStyle;