yiliangyiyun-app/components/upload/weCropper.js

(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';

  /**
   * Created by sail on 2017/6/11.
   */
  var device = void 0;
  var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];

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

  function setTouchState(instance) {
    for (var _len = arguments.length, arg = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      arg[_key - 1] = arguments[_key];
    }

    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;
  }

  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
    return typeof obj;
  } : function(obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  };




  var classCallCheck = function(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  };

  var createClass = function() {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function(Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();




  var slicedToArray = function() {
    function sliceIterator(arr, i) {
      var _arr = [];
      var _n = true;
      var _d = false;
      var _e = undefined;

      try {
        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
          _arr.push(_s.value);

          if (i && _arr.length === i) break;
        }
      } catch (err) {
        _d = true;
        _e = err;
      } finally {
        try {
          if (!_n && _i["return"]) _i["return"]();
        } finally {
          if (_d) throw _e;
        }
      }

      return _arr;
    }

    return function(arr, i) {
      if (Array.isArray(arr)) {
        return arr;
      } else if (Symbol.iterator in Object(arr)) {
        return sliceIterator(arr, i);
      } else {
        throw new TypeError("Invalid attempt to destructure non-iterable instance");
      }
    };
  }();

  var tmp = {};

  var DEFAULT = {
    id: {
      default: 'cropper',
      get: function get$$1() {
        return tmp.id;
      },
      set: function set$$1(value) {
        if (typeof value !== 'string') {}
        tmp.id = value;
      }
    },
    width: {
      default: 750,
      get: function get$$1() {
        return tmp.width;
      },
      set: function set$$1(value) {
        tmp.width = value;
      }
    },
    height: {
      default: 750,
      get: function get$$1() {
        return tmp.height;
      },
      set: function set$$1(value) {
        tmp.height = value;
      }
    },
    scale: {
      default: 2.5,
      get: function get$$1() {
        return tmp.scale;
      },
      set: function set$$1(value) {
        tmp.scale = value;
      }
    },
    zoom: {
      default: 5,
      get: function get$$1() {
        return tmp.zoom;
      },
      set: function set$$1(value) {
        tmp.zoom = value;
      }
    },
    src: {
      default: 'cropper',
      get: function get$$1() {
        return tmp.src;
      },
      set: function set$$1(value) {
        tmp.src = value;
      }
    },
    cut: {
      default: {},
      get: function get$$1() {
        return tmp.cut;
      },
      set: function set$$1(value) {
        tmp.cut = value;
      }
    },
    onReady: {
      default: null,
      get: function get$$1() {
        return tmp.ready;
      },
      set: function set$$1(value) {
        tmp.ready = value;
      }
    },
    onBeforeImageLoad: {
      default: null,
      get: function get$$1() {
        return tmp.beforeImageLoad;
      },
      set: function set$$1(value) {
        tmp.beforeImageLoad = value;
      }
    },
    onImageLoad: {
      default: null,
      get: function get$$1() {
        return tmp.imageLoad;
      },
      set: function set$$1(value) {
        tmp.imageLoad = value;
      }
    },
    onBeforeDraw: {
      default: null,
      get: function get$$1() {
        return tmp.beforeDraw;
      },
      set: function set$$1(value) {
        tmp.beforeDraw = value;
      }
    }
  };

  /**
   * Created by sail on 2017/6/11.
   */
  function prepare() {
    var self = this;

    var _getDevice = getDevice(),
      windowWidth = _getDevice.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);
      }
    };

    self.deviceRadio = windowWidth / 750;
		self.deviceRadio=self.deviceRadio.toFixed(2)
  }

  /**
   *
   */
  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;
        }
      }
      return self;
    };
  }

  /**
   * Created by sail on 2017/6/11.
   */
  function methods() {
    var self = this;

    var deviceRadio = self.deviceRadio;
		console.log(JSON.stringify(self));

    var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
    var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
    var _self$cut = self.cut,
      _self$cut$x = _self$cut.x,
      x = _self$cut$x === undefined ? 0 : _self$cut$x,
      _self$cut$y = _self$cut.y,
      y = _self$cut$y === undefined ? 0 : _self$cut$y,
      _self$cut$width = _self$cut.width,
      width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
      _self$cut$height = _self$cut.height,
      height = _self$cut$height === undefined ? boundHeight : _self$cut$height;


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

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

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

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

      uni.getImageInfo({
        src: src,
        success: function success(res) {
          var innerAspectRadio = res.width / res.height;
          self.croperTarget = res.path||src;
          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();

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

      self.update();
      return self;
    };

    self.getCropperImage = function() {
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      var id = self.id;

      var ARG_TYPE = toString.call(args[0]);
      switch (ARG_TYPE) {
        case '[object Object]':
          var _args$0$quality = args[0].quality,
            quality = _args$0$quality === undefined ? 10 : _args$0$quality;
						console.log("quality--"+quality);
						
          uni.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) {
							console.log(res);
              typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
            }
          });
          break;
        case '[object Function]':
          uni.canvasToTempFilePath({
            canvasId: id,
            x: x,
            y: y,
						fileType:"jpg",
            width: width,
            height: height,
            destWidth: width ,
            destHeight: height,
            success: function success(res) {
							
              typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
            }
          });
          break;
      }

      return self;
    };
  }

  /**
   * Created by sail on 2017/6/11.
   */
  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 = void 0,
        yMove = void 0;
      //计算单指移动的距离
      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 = void 0,
        yMove = void 0,
        oldDistance = void 0;

      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 = void 0,
        yMove = void 0,
        newDistance = void 0;
      var scale = self.scale,
        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;
    };
  }

  /**
   * Created by sail on 2017/6/11.
   */

  var handle = {
    //  图片手势初始监测
    touchStart: function touchStart(e) {
      var self = this;
      var _e$touches = slicedToArray(e.touches, 2),
        touch0 = _e$touches[0],
        touch1 = _e$touches[1];
				
				console.log(JSON.stringify(touch1));
				if(!touch0.x){
					touch0.x=touch0.clientX;
					touch0.y=touch0.clientY;
					if(touch1){
						touch1.x=touch1.clientX;
						touch1.y=touch1.clientY;
					}
				}

      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 _e$touches2 = slicedToArray(e.touches, 2),
        touch0 = _e$touches2[0],
        touch1 = _e$touches2[1];
				if(!touch0.x){
					touch0.x=touch0.clientX;
					touch0.y=touch0.clientY;
					if(touch1){
						touch1.x=touch1.clientX;
						touch1.y=touch1.clientY;
					}
				}
      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();
    }
  };

  /**
   * Created by sail on 1017/6/12.
   */
  function cut() {
    var self = this;
    var deviceRadio = self.deviceRadio;

    var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
    var boundHeight = self.height;
    // 裁剪框默认高度，即整个画布高度
    var _self$cut = self.cut,
      _self$cut$x = _self$cut.x,
      x = _self$cut$x === undefined ? 0 : _self$cut$x,
      _self$cut$y = _self$cut.y,
      y = _self$cut$y === undefined ? 0 : _self$cut$y,
      _self$cut$width = _self$cut.width,
      width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
      _self$cut$height = _self$cut.height,
      height = _self$cut$height === undefined ? boundHeight : _self$cut$height;

    /**
     * 设置边界
     * @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() {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        _ref$color = _ref.color,
        color = _ref$color === undefined ? '#04b00f' : _ref$color,
        _ref$mask = _ref.mask,
        mask = _ref$mask === undefined ? 'rgba(0, 0, 0, 0.3)' : _ref$mask,
        _ref$lineWidth = _ref.lineWidth,
        lineWidth = _ref$lineWidth === undefined ? 1 : _ref$lineWidth;

      // 绘制半透明层
      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.4';

  var weCropper = function() {
    function weCropper(params) {
      classCallCheck(this, weCropper);

      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;
    }

    createClass(weCropper, [{
      key: 'init',
      value: 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;
      }
    }]);
    return weCropper;
  }();
	
		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;

})));