zxh-ui/lib/utils/compress.js

A Component Library for Vue.js.

'use strict';

exports.__esModule = true;

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

var _create = require('babel-runtime/core-js/object/create');

var _create2 = _interopRequireDefault(_create);

exports.urltoImage = urltoImage;
exports.imagetoCanvas = imagetoCanvas;
exports.canvasResizetoFile = canvasResizetoFile;
exports.canvasResizetoDataURL = canvasResizetoDataURL;
exports.filetoDataURL = filetoDataURL;
exports.dataURLtoImage = dataURLtoImage;
exports.dataURLtoFile = dataURLtoFile;
exports.default = compress;

var _exifJs = require('exif-js');

var _exifJs2 = _interopRequireDefault(_exifJs);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _config = null;

/**
 * 通过 url 加载所需要的图片对象
 * @param url
 * @param cb
 */
function urltoImage(url, cb) {
  var img = new Image();
  img.src = url;
  img.crossOrigin = '';
  img.onload = function () {
    cb && cb(img);
  };
}

/**
 * 将 Image 对象转变为 Canvas 类型对象
 * @param image
 * @returns {HTMLCanvasElement}
 */
function imagetoCanvas(image) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var w = image.width;
  var h = image.height;
  switch (_config.orientation) {
    case 6:
      // 需要顺时针90度旋转
      canvas.width = h;
      canvas.height = w;
      context.rotate(90 * Math.PI / 180);
      context.drawImage(image, 0, -h, w, h);
      break;
    case 8:
      // 需要逆时针90度旋转
      canvas.width = h;
      canvas.height = w;
      context.rotate(-90 * Math.PI / 180);
      context.drawImage(image, -w, 0, w, h);
      break;
    case 3:
      // 需要180度旋转
      context.rotate(180 * Math.PI / 180);
      context.drawImage(image, -w, -h, w, h);
      break;
    default:
      canvas.width = w;
      canvas.height = h;
      context.drawImage(image, 0, 0, w, h);
  }
  return canvas;
}

/**
 * 将 canvas 对象压缩转变为 Blob 类型对象
 * @param canvas
 * @param quality
 * @param cb
 */
function canvasResizetoFile(canvas, quality, cb) {
  canvas.toBlob(function (blob) {
    blob.name = _config.name;
    cb && cb(blob);
  }, _config.type, quality);
}

/**
 * 将 canvas 对象压缩转变为 dataURL 字符串
 * @param canvas
 * @param quality
 * @returns {string}
 */
function canvasResizetoDataURL(canvas, quality) {
  return canvas.toDataURL(_config.type, quality);
}

/**
 * 将 File （ Blob ）类型文件转变为 dataURL 字符串
 * @param file
 * @param cb
 */
function filetoDataURL(file, cb) {
  var reader = new FileReader();
  reader.onloadend = function (e) {
    cb && cb(e.target.result);
  };
  reader.readAsDataURL(file);
}

/**
 * 将 dataURL 字符串转变为 Image 类型文件
 * @param dataurl
 * @param cb
 */
function dataURLtoImage(dataurl, cb) {
  var img = new Image();
  img.onload = function () {
    cb && cb(img);
  };
  img.src = dataurl;
}

/**
 * 将 dataURL 字符串转变为 Blob 类型对象
 * @param dataurl
 * @returns {Blob}
 */
function dataURLtoFile(dataurl) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  // eslint-disable-next-line no-undef
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**
 * 设置图片宽高
 * @param image
 */
function computeImgae(image) {
  var width = image.naturalWidth;
  var height = image.naturalHeight;
  if (width > _config.base && height > _config.base) {
    if (width > height) {
      var scale = height / width;
      width = _config.base;
      height = width * scale;
    } else {
      var _scale = width / height;
      height = _config.base;
      width = height * _scale;
    }
  } else if (width > _config.base && height < _config.base) {
    var _scale2 = height / width;
    width = _config.base;
    height = width * _scale2;
  } else if (width < _config.base && height > _config.base) {
    var _scale3 = width / height;
    height = _config.base;
    width = height * _scale3;
  }
  image.width = width;
  image.height = height;
  engine(imagetoCanvas(image), 1);
}

/**
 * 压缩图片质量
 * @param canvas
 * @param quality
 */
function engine(canvas, quality) {
  canvasResizetoFile(canvas, quality, function (blob) {
    if (blob.size > _config.size) {
      if (quality - _config.qualityStep <= 0.5) {
        _config.resolve(blob);
        return;
      }
      engine(canvas, quality - _config.qualityStep);
    } else {
      _config.resolve(blob);
    }
  });
}

function compress(file, options) {
  if (!file || !/image\/(png|jpe?g)/.test(file.type)) {
    throw new Error('please upload image[png,jpg,jpeg] file');
  }
  _config = (0, _create2.default)(options || null);
  _config.size = file.size;
  _config.type = file.type.replace(/png$/, 'jpeg');
  _config.name = file.name.replace(/\.png$/, '.jpeg');
  _config.qualityStep = 0.1;
  _config.base = 1080;

  // eslint-disable-next-line no-undef
  return new _promise2.default(function (resolve, reject) {
    _config.resolve = resolve;
    _config.reject = reject;
    _exifJs2.default.getData(file, function () {
      _config.orientation = _exifJs2.default.getTag(file, 'Orientation');
      filetoDataURL(file, function (data) {
        dataURLtoImage(data, computeImgae);
      });
    });
  });
}