js怎么上传压缩图片（如何用JS有效的压缩图片）

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.jpg" alt="js怎么上传压缩图片（如何用JS有效的压缩图片）" border="0" />

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.jpg" alt="js怎么上传压缩图片（如何用JS有效的压缩图片）" border="0" />

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.jpg" alt="js怎么上传压缩图片（如何用JS有效的压缩图片）" border="0" />