yelaixiang/utils/we-cropper/we-cropper.js

/**
 * we-cropper v1.1.5
 * (c) 2017 dlhandsome
 * @license MIT
 */
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.WeCropper = factory());
}(this, (function () { 'use strict';

var device = void 0;
var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];

function firstLetterUpper (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

function setTouchState (instance) {
  var arg = [], len = arguments.length - 1;
  while ( len-- > 0 ) arg[ len ] = arguments[ len + 1 ];

  TOUCH_STATE.forEach(function (key, i) {
    if (arg[i] !== undefined) {
      instance[key] = arg[i];
    }
  });
}

function validator (instance, o) {
  Object.defineProperties(instance, o);
}

function	getDevice () {
  if (!device) {
    device = wx.getSystemInfoSync();
  }
  return device
}

function isFunction (obj) {
  return typeof obj === 'function'
}

var tmp = {};

var DEFAULT = {
  id: {
    default: 'cropper',
    get: function get () {
      return tmp.id
    },
    set: function set (value) {
      if (typeof (value) !== 'string') {
        console.error(("id：" + value + " is invalid"));
      }
      tmp.id = value;
    }
  },
  width: {
    default: 750,
    get: function get () {
      return tmp.width
    },
    set: function set (value) {
      if (typeof (value) !== 'number') {
        console.error(("width：" + value + " is invalid"));
      }
      tmp.width = value;
    }
  },
  height: {
    default: 750,
    get: function get () {
      return tmp.height
    },
    set: function set (value) {
      if (typeof (value) !== 'number') {
        console.error(("height：" + value + " is invalid"));
      }
      tmp.height = value;
    }
  },
  scale: {
    default: 2.5,
    get: function get () {
      return tmp.scale
    },
    set: function set (value) {
      if (typeof (value) !== 'number') {
        console.error(("scale：" + value + " is invalid"));
      }
      tmp.scale = value;
    }
  },
  zoom: {
    default: 5,
    get: function get () {
      return tmp.zoom
    },
    set: function set (value) {
      if (typeof (value) !== 'number') {
        console.error(("zoom：" + value + " is invalid"));
      } else if (value < 0 || value > 10) {
        console.error("zoom should be ranged in 0 ~ 10");
      }
      tmp.zoom = value;
    }
  },
  src: {
    default: 'cropper',
    get: function get () {
      return tmp.src
    },
    set: function set (value) {
      if (typeof (value) !== 'string') {
        console.error(("id：" + value + " is invalid"));
      }
      tmp.src = value;
    }
  },
  cut: {
    default: {},
    get: function get () {
      return tmp.cut
    },
    set: function set (value) {
      if (typeof (value) !== 'object') {
        console.error(("id：" + value + " is invalid"));
      }
      tmp.cut = value;
    }
  },
  onReady: {
    default: null,
    get: function get () {
      return tmp.ready
    },
    set: function set (value) {
      tmp.ready = value;
    }
  },
  onBeforeImageLoad: {
    default: null,
    get: function get () {
      return tmp.beforeImageLoad
    },
    set: function set (value) {
      tmp.beforeImageLoad = value;
    }
  },
  onImageLoad: {
    default: null,
    get: function get () {
      return tmp.imageLoad
    },
    set: function set (value) {
      tmp.imageLoad = value;
    }
  },
  onBeforeDraw: {
    default: null,
    get: function get () {
      return tmp.beforeDraw
    },
    set: function set (value) {
      tmp.beforeDraw = value;
    }
  }
};

function prepare () {
  var self = this;
  var ref = getDevice();
  var windowWidth = ref.windowWidth;

  self.attachPage = function () {
    var pages = getCurrentPages();
    //  获取到当前page上下文
    var pageContext = pages[pages.length - 1];
    //  把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
    pageContext.wecropper = self;
  };

  self.createCtx = function () {
    var id = self.id;
    if (id) {
      self.ctx = wx.createCanvasContext(id);
    } else {
      console.error("constructor: create canvas context failed, 'id' must be valuable");
    }
  };

  self.deviceRadio = windowWidth / 750;
}

function observer () {
  var self = this;

  var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];

  self.on = function (event, fn) {
    if (EVENT_TYPE.indexOf(event) > -1) {
      if (typeof (fn) === 'function') {
        event === 'ready'
          ? fn(self)
          : self[("on" + (firstLetterUpper(event)))] = fn;
      }
    } else {
      console.error(("event: " + event + " is invalid"));
    }
    return self
  };
}

function methods () {
  var self = this;

  var deviceRadio = self.deviceRadio;
  var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
  var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
  var ref = self.cut;
  var x = ref.x; if ( x === void 0 ) x = 0;
  var y = ref.y; if ( y === void 0 ) y = 0;
  var width = ref.width; if ( width === void 0 ) width = boundWidth;
  var height = ref.height; if ( height === void 0 ) height = boundHeight;

  self.updateCanvas = function () {
    if (self.croperTarget) {
      //  画布绘制图片
      self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight);
    }
    isFunction(self.onBeforeDraw) && self.onBeforeDraw(self.ctx, self);

    self.setBoundStyle(); //	设置边界样式
    self.ctx.draw();
    return self
  };

  self.pushOrign = function (src) {
    self.src = src;

    isFunction(self.onBeforeImageLoad) && self.onBeforeImageLoad(self.ctx, self);

    wx.getImageInfo({
      src: src,
      success: function success (res) {
        var innerAspectRadio = res.width / res.height;

        self.croperTarget = res.path;

        console.log(x, y);
        if (innerAspectRadio < width / height) {
          self.rectX = x;
          self.baseWidth = width;
          self.baseHeight = width / innerAspectRadio;
          self.rectY = y - Math.abs((height - self.baseHeight) / 2);
        } else {
          self.rectY = y;
          self.baseWidth = height * innerAspectRadio;
          self.baseHeight = height;
          self.rectX = x - Math.abs((width - self.baseWidth) / 2);
        }

        self.imgLeft = self.rectX;
        self.imgTop = self.rectY;
        self.scaleWidth = self.baseWidth;
        self.scaleHeight = self.baseHeight;

        self.updateCanvas();

        isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self);
      }
    });

    self.update();
    return self
  };

  self.getCropperImage = function () {
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];

    var id = self.id;
    var ARG_TYPE = toString.call(args[0]);
    var fn = args[args.length - 1];

    switch (ARG_TYPE) {
      case '[object Object]':
        var ref = args[0];
    var quality = ref.quality; if ( quality === void 0 ) quality = 10;

        if (typeof (quality) !== 'number') {
          console.error(("quality：" + quality + " is invalid"));
        } else if (quality < 0 || quality > 10) {
          console.error("quality should be ranged in 0 ~ 10");
        }
        wx.canvasToTempFilePath({
          canvasId: id,
          x: x,
          y: y,
          width: width,
          height: height,
          destWidth: width * quality / (deviceRadio * 10),
          destHeight: height * quality / (deviceRadio * 10),
          success: function success (res) {
            isFunction(fn) && fn.call(self, res.tempFilePath);
          },
          fail: function fail (res) {
            isFunction(fn) && fn.call(self, null);
          }
        }); break
      case '[object Function]':
        wx.canvasToTempFilePath({
          canvasId: id,
          x: x,
          y: y,
          width: width,
          height: height,
          destWidth: width / deviceRadio,
          destHeight: height / deviceRadio,
          success: function success (res) {
            isFunction(fn) && fn.call(self, res.tempFilePath);
          },
          fail: function fail (res) {
            isFunction(fn) && fn.call(self, null);
          }
        }); break
    }

    return self
  };
}

function update () {
  var self = this;

  if (!self.src) { return }

  self.__oneTouchStart = function (touch) {
    self.touchX0 = touch.x;
    self.touchY0 = touch.y;
  };

  self.__oneTouchMove = function (touch) {
    var xMove, yMove;
    // 计算单指移动的距离
    if (self.touchended) {
      return self.updateCanvas()
    }
    xMove = touch.x - self.touchX0;
    yMove = touch.y - self.touchY0;

    var imgLeft = self.rectX + xMove;
    var imgTop = self.rectY + yMove;

    self.outsideBound(imgLeft, imgTop);

    self.updateCanvas();
  };

  self.__twoTouchStart = function (touch0, touch1) {
    var xMove, yMove, oldDistance;

    self.touchX1 = self.rectX + self.scaleWidth / 2;
    self.touchY1 = self.rectY + self.scaleHeight / 2;

    // 计算两指距离
    xMove = touch1.x - touch0.x;
    yMove = touch1.y - touch0.y;
    oldDistance = Math.sqrt(xMove * xMove + yMove * yMove);

    self.oldDistance = oldDistance;
  };

  self.__twoTouchMove = function (touch0, touch1) {
    var xMove, yMove, newDistance;
    var scale = self.scale;
    var zoom = self.zoom;
    // 计算二指最新距离
    xMove = touch1.x - touch0.x;
    yMove = touch1.y - touch0.y;
    newDistance = Math.sqrt(xMove * xMove + yMove * yMove);

    //  使用0.005的缩放倍数具有良好的缩放体验
    self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance);

    //  设定缩放范围
    self.newScale <= 1 && (self.newScale = 1);
    self.newScale >= scale && (self.newScale = scale);

    self.scaleWidth = self.newScale * self.baseWidth;
    self.scaleHeight = self.newScale * self.baseHeight;
    var imgLeft = self.touchX1 - self.scaleWidth / 2;
    var imgTop = self.touchY1 - self.scaleHeight / 2;

    self.outsideBound(imgLeft, imgTop);

    self.updateCanvas();
  };

  self.__xtouchEnd = function () {
    self.oldScale = self.newScale;
    self.rectX = self.imgLeft;
    self.rectY = self.imgTop;
  };
}

var handle = {
  //  图片手势初始监测
  touchStart: function touchStart (e) {
    var self = this;
    var ref = e.touches;
    var touch0 = ref[0];
    var touch1 = ref[1];

    setTouchState(self, true, null, null);

    // 计算第一个触摸点的位置，并参照改点进行缩放
    self.__oneTouchStart(touch0);

    // 两指手势触发
    if (e.touches.length >= 2) {
      self.__twoTouchStart(touch0, touch1);
    }
  },

  //  图片手势动态缩放
  touchMove: function touchMove (e) {
    var self = this;
    var ref = e.touches;
    var touch0 = ref[0];
    var touch1 = ref[1];

    setTouchState(self, null, true);

    // 单指手势时触发
    if (e.touches.length === 1) {
      self.__oneTouchMove(touch0);
    }
    // 两指手势触发
    if (e.touches.length >= 2) {
      self.__twoTouchMove(touch0, touch1);
    }
  },

  touchEnd: function touchEnd (e) {
    var self = this;

    setTouchState(self, false, false, true);
    self.__xtouchEnd();
  }
};

function cut () {
  var self = this;
  var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
  var boundHeight = self.height;
  // 裁剪框默认高度，即整个画布高度
  var ref = self.cut;
  var x = ref.x; if ( x === void 0 ) x = 0;
  var y = ref.y; if ( y === void 0 ) y = 0;
  var width = ref.width; if ( width === void 0 ) width = boundWidth;
  var height = ref.height; if ( height === void 0 ) height = boundHeight;

  /**
	 * 设置边界
	 * @param imgLeft 图片左上角横坐标值
	 * @param imgTop 图片左上角纵坐标值
	 */
  self.outsideBound = function (imgLeft, imgTop) {
    self.imgLeft = imgLeft >= x
      ? x
      : self.scaleWidth + imgLeft - x <= width
        ? x + width - self.scaleWidth
        :	imgLeft;

    self.imgTop = imgTop >= y
      ? y
      : self.scaleHeight + imgTop - y <= height
        ? y + height - self.scaleHeight
        : imgTop;
  };

  /**
	 * 设置边界样式
	 * @param color	边界颜色
	 */
  self.setBoundStyle = function (ref) {
    if ( ref === void 0 ) ref = {};
    var color = ref.color; if ( color === void 0 ) color = '#04b00f';
    var mask = ref.mask; if ( mask === void 0 ) mask = 'rgba(0, 0, 0, 0.3)';
    var lineWidth = ref.lineWidth; if ( lineWidth === void 0 ) lineWidth = 1;

    // 绘制半透明层
    self.ctx.beginPath();
    self.ctx.setFillStyle(mask);
    self.ctx.fillRect(0, 0, x, boundHeight);
    self.ctx.fillRect(x, 0, width, y);
    self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
    self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
    self.ctx.fill();

    // 设置边界左上角样式
    // 为使边界样式处于边界外边缘，此时x、y均要减少lineWidth
    self.ctx.beginPath();
    self.ctx.setStrokeStyle(color);
    self.ctx.setLineWidth(lineWidth);
    self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth);
    self.ctx.lineTo(x - lineWidth, y - lineWidth);
    self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth);
    self.ctx.stroke();

    // 设置边界左下角样式
    // 为使边界样式处于边界外边缘，此时x要减少lineWidth、y要增加lineWidth
    self.ctx.beginPath();
    self.ctx.setStrokeStyle(color);
    self.ctx.setLineWidth(lineWidth);
    self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth);
    self.ctx.lineTo(x - lineWidth, y + height + lineWidth);
    self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth);
    self.ctx.stroke();

    // 设置边界右上角样式
    // 为使边界样式处于边界外边缘，此时x要增加lineWidth、y要减少lineWidth
    self.ctx.beginPath();
    self.ctx.setStrokeStyle(color);
    self.ctx.setLineWidth(lineWidth);
    self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth);
    self.ctx.lineTo(x + width + lineWidth, y - lineWidth);
    self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth);
    self.ctx.stroke();

    // 设置边界右下角样式
    // 为使边界样式处于边界外边缘，此时x、y均要增加lineWidth
    self.ctx.beginPath();
    self.ctx.setStrokeStyle(color);
    self.ctx.setLineWidth(lineWidth);
    self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth);
    self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth);
    self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth);
    self.ctx.stroke();
  };
}

var version = "1.1.5";

var weCropper = function weCropper (params) {
  var self = this;
  var _default = {};

  validator(self, DEFAULT);

  Object.keys(DEFAULT).forEach(function (key) {
    _default[key] = DEFAULT[key].default;
  });
  Object.assign(self, _default, params);

  self.prepare();
  self.attachPage();
  self.createCtx();
  self.observer();
  self.cutt();
  self.methods();
  self.init();
  self.update();

  return self
};

weCropper.prototype.init = function init () {
  var self = this;
  var src = self.src;

  self.version = version;

  typeof self.onReady === 'function' && self.onReady(self.ctx, self);

  if (src) {
    self.pushOrign(src);
  }
  setTouchState(self, false, false, false);

  self.oldScale = 1;
  self.newScale = 1;

  return self
};

Object.assign(weCropper.prototype, handle);

weCropper.prototype.prepare = prepare;
weCropper.prototype.observer = observer;
weCropper.prototype.methods = methods;
weCropper.prototype.cutt = cut;
weCropper.prototype.update = update;

return weCropper;

})));