client-base-v5/src/widget/Cropper.vue

<template>
  <div>
    <div>
      <button
        id="fileSelect"
        class="btn btn-primary"
        :readonly="!readonly"
        @click="selectFile"
      >
        {{ $t("lang.Cropper.selectPicture") }}
      </button>
      <input
        :id="'file1' + uuid"
        ref="fileInput1"
        autocomplete="off"
        type="file"
        class="form-control file-input"
        @change="onFileChanges"
      />
      <label for="attachment">
        <a
          role="button"
          class="btn btn-primary btn-sm"
          style="height: 34px"
          @click="clickButton"
        >
          <i class="fa fa-upload" />
          &nbsp; {{ $t("lang.Cropper.selectPictureUploadDirectly") }}
        </a>
      </label>
      <button
        id="button2"
        class="btn btn-success"
        type="button"
        @click="cropImage"
      >
        {{ $t("lang.Cropper.upload") }}
      </button>
      <input
        v-show="false"
        :id="'file' + uuid"
        ref="fileInput"
        autocomplete="off"
        type="file"
        class="form-control"
        :readonly="!readonly"
        @change="previewAfterUpload($event)"
      />
    </div>
    <div style="height: 5px" />
    <div :id="'modal-contain' + uuid">
      <div :id="'preview-image-div' + uuid">
        <img :id="'crop-image' + uuid" width="100%" />
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import { Notify, Uuid } from 'pc-component-v3';


export default {

  components: {
  },

  props: {
    uuid: {
      type: String,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: null,
    },
  },
  emits: ['fileUpload', 'uploadImage'],

  data: function () {
    return {
      croppable: false,
      croppedCanvas: '',
      roundedCanvas: '',
      dataURL: '',
      errorMessage: '',
    };
  },

  watch: {},

  mounted: function () {
    //判断浏览器是否支持FileReader接口
    if (typeof FileReader == 'undefined') {
      Notify.error('提示', '当前浏览器不支持FileReader接口', false);
    }
  },

  methods: {
    /**
     * 点击上传按钮事件
     * @return {[type]} [description]
     */
    clickButton: function (e) {
      var fileElem = document.getElementById('file1' + this.uuid);
      if (fileElem) {
        fileElem.click();
      }
      e.preventDefault();
    },
    onFileChanges: function (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.$emit('fileUpload', files[0]);
    },
    getRoundedCanvas: function (sourceCanvas) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var width = sourceCanvas.width;
      var height = sourceCanvas.height;

      canvas.width = width;
      canvas.height = height;
      context.beginPath();
      context.arc(
        width / 2,
        height / 2,
        Math.min(width, height) / 2,
        0,
        2 * Math.PI,
      );
      context.strokeStyle = 'rgba(0,0,0,0)';
      context.stroke();
      context.clip();
      context.drawImage(sourceCanvas, 0, 0, width, height);

      return canvas;
    },

    /**
     * 圆形截图的方法，目前未调用，保留
     */
    roundImage: function () {
      if (this.croppable == false) {
        return;
      }
      this.croppedCanvas = this.image1.cropper('getCroppedCanvas');
      this.roundedCanvas = this.getRoundedCanvas(this.croppedCanvas);
      this.dataURL = this.roundedCanvas.toDataURL();
    },

    /**
     * 裁剪图片
     */
    cropImage: function () {
      if (this.croppable == false) {
        return;
      }
      this.croppedCanvas = this.image1.cropper('getCroppedCanvas');
      this.roundedCanvas = this.getRoundedCanvas(this.croppedCanvas);
      this.dataURL = this.croppedCanvas.toDataURL();
      this.$emit('uploadImage', this.dataURL);
    },

    /**
     * 创建图片裁剪控件
     */
    createCropper: function () {
      var _self = this;
      this.image1 = $('#crop-image' + _self.uuid);
      this.image1.cropper({
        viewMode: 1,
        ready: function () {
          _self.croppable = true;
        },
      });
    },

    /**
     * 选择了文件
     */
    selectFile: function (e) {
      var fileElem = document.getElementById('file' + this.uuid);
      if (fileElem) {
        fileElem.click();
      }
      e.preventDefault(); // prevent navigation to "#"
    },

    /**
     * 选择图片后，马上预览
     */
    previewAfterUpload: function (e) {
      var _self = this;
      var elementStr =
        '<div id=\'preview-image-div' +
        _self.uuid +
        '\'><img id=\'crop-image' +
        _self.uuid +
        '\'/></div>';
      $('#preview-image-div' + _self.uuid).remove();
      $('#modal-contain' + _self.uuid).append(elementStr);

      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return;
      }
      var file = files[files.length - 1];

      console.log('file.size = ' + file.size); //file.size 单位为byte

      if (file.size > 5000 * 1024) {
        Notify.error('错误', '图片大小超过限制，最大5M', true);
        e.target.value = '';
        return;
      }

      var reader = new FileReader();

      //读取文件过程方法
      reader.onloadstart = function (e) {
        console.log('开始读取....');
      };
      reader.onprogress = function (e) {
        console.log('正在读取中....');
      };
      reader.onabort = function (e) {
        console.log('中断读取....');
      };
      reader.onerror = function (e) {
        console.log('读取异常....');
      };
      reader.onload = function (e) {
        console.log('成功读取....');
        var img = document.getElementById('crop-image' + _self.uuid);
        img.src = e.target.result;
        _self.createCropper();
        _self.$refs.fileInput.value = '';
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>

<style scoped>
.input-group {
  width: 100%;
}

img {
  max-width: 100%;
}

/* Override Cropper's styles */
.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}

.finish_room {
  width: 400px;
  height: auto;
}

.finish_room2 {
  width: 100%;
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
}

.finish_room2 .room_img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}

.finish_room2 .room_img img {
  width: 100%;
  height: 100%;
}

.finish_room2 > .room_img span {
  position: absolute;
  width: auto;
  height: auto;
  right: 5px;
  bottom: 3px;
}

.room_add_img {
  width: 148px;
  height: 98px;
  border: 1px solid #e1e1e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.room_add_img > span:nth-child(1) {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.room_add_img > span:nth-child(2) {
  margin-bottom: 10px;
}

.room_add_img input {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
}
.file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
</style>