[Canvas] Photo processing: cropperjs

一、初始化CropBox

repo: https://github.com/fengyuanchen/cropperjs

html: https://github.com/fengyuanchen/cropperjs/blob/master/docs/examples/upload-cropped-image-to-server.html

js: https://github.com/fengyuanchen/cropperjs/blob/master/docs/js/cropper.js 

    initCropBox: function initCropBox() {
      var options = this.options,
          canvasData = this.canvasData;
      var aspectRatio = options.aspectRatio || options.initialAspectRatio;
      var autoCropArea = Number(options.autoCropArea) || 0.8;
      var cropBoxData = {
        width: canvasData.width,
        height: canvasData.height
      };

      if (aspectRatio) {
        if (canvasData.height * aspectRatio > canvasData.width) {
          cropBoxData.height = cropBoxData.width / aspectRatio;
        } else {
          cropBoxData.width = cropBoxData.height * aspectRatio;
        }
      }

      this.cropBoxData = cropBoxData;
      this.limitCropBox(true, true); // Initialize auto crop area

      cropBoxData.width  = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
      cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); // The width/height of auto crop area must large than "minWidth/Height"

      cropBoxData.width  = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);
      cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);
      cropBoxData.left    = canvasData.left + (canvasData.width - cropBoxData.width) / 2;
      cropBoxData.top     = canvasData.top + (canvasData.height - cropBoxData.height) / 2;
      cropBoxData.oldLeft = cropBoxData.left;
      cropBoxData.oldTop  = cropBoxData.top;
      this.initialCropBoxData = assign({}, cropBoxData);
    },

 

 

 

二、crop事件

    unbind: function unbind() {
      var element = this.element,
          options = this.options,
          cropper = this.cropper;

 

 

continue ...