<!-- 图片剪裁 -->
<el-dialog
	title="图片剪裁"
	width="860px"
	:visible.sync="cropperVisible"
	:before-close="cropperClose">
	<div class="cropper-wrapper clearfix">
		<div class="cropper-sider">
			<div class="cropper-preview">
				<template v-if="false">
					<div class="preview"></div>
				</template>
				<template v-if="false">
					<div class="cropped">
						<img
							v-if="cropperImg"
							:src="cropperImg"
							alt="" />
					</div>
				</template>
			</div>
			<div class="cropper-scale">
				<el-radio-group v-model="cropperRadioVal" @change="cropperRadioChange">
					<el-radio :label="1/1">1:1</el-radio>
					<el-radio :label="3/4">3:4</el-radio>
					<el-radio :label="4/3">4:3</el-radio>
					<el-radio :label="9/16">9:16</el-radio>
					<el-radio :label="16/9">16:9</el-radio>
					<el-radio :label="0">自由拖拽</el-radio>
				</el-radio-group>
			</div>
			<div class="cropper-actions">
				<ul class="rows">
					<li>
						<a
							href="javascript:;"
							role="button"
							class="move-left"
							title="向左移动"
							@click.prevent="cropperMove(-10, 0)">向左移动</a>
					</li>
					<li>
						<a
							href="javascript:;"
							role="button"
							class="move-right"
							title="向右移动"
							@click.prevent="cropperMove(10, 0)">向右移动</a>
					</li>
					<li>
						<a
							href="javascript:;"
							role="button"
							class="move-up"
							title="向上移动"
							@click.prevent="cropperMove(0, -10)">向上移动</a>
					</li>
					<li>
						<a
							href="javascript:;"
							role="button"
							class="move-down"
							title="向下移动"
							@click.prevent="cropperMove(0, 10)">向下移动</a>
					</li>
				</ul>
				<ul class="rows">
					<li>
						<a
							href="javascript:;"
							role="button"
							class="rotate-right"
							title="向右旋转90度"
							@click.prevent="cropperRotate(90)">向右旋转90度</a>
					</li>
					<li>
						<a
							href="javascript:;"
							role="button"
							class="rotate-left"
							title="向左旋转90度"
							@click.prevent="cropperRotate(-90)">向左旋转90度</a>
					</li>
				</ul>
				<ul class="rows">
					<li>
						<a
							ref="flipX"
							href="javascript:;"
							role="button"
							class="flip-x"
							title="上下翻转"
							@click.prevent="cropperFlipX()">上下翻转</a>
					</li>
					<li>
						<a
							ref="flipY"
							href="javascript:;"
							role="button"
							class="flip-y"
							title="左右翻转"
							@click.prevent="cropperFlipY()">左右翻转</a>
					</li>
				</ul>
				<ul class="rows">
					<li>
						<a
							href="javascript:;"
							role="button"
							class="zoom-out"
							title="放大"
							@click.prevent="cropperZoom(0.2)">放大</a>
					</li>
					<li>
						<a
							href="javascript:;"
							role="button"
							class="zoom-in"
							title="缩小"
							@click.prevent="cropperZoom(-0.2)">缩小</a>
					</li>
				</ul>
				<ul class="rows">
					<li>
						<a
							href="javascript:;"
							role="button"
							class="reset"
							title="全部重置"
							@click.prevent="cropperReset()">全部重置</a>
					</li>
				</ul>
				<input
					ref="input"
					type="hidden"
					name="image"
					accept="image/*"
					@change="cropperSetImage" />
			</div>
		</div>
		<div class="cropper-content">
			<div class="cropper-area">
				<div class="cropper-img cropper-bg">
					<vue-cropper
						ref="cropper"
						preview = ".preview"
						:auto-crop = true
						:view-mode = 1
						:auto-crop-area = 1
						:min-container-width = 600
						:min-container-height = 400
						:aspect-ratio = "cropperAspectWH"
						:src = "cropperImgSrc"
						:container-style = "{ 'width': '100%', 'height': '400px' }"
						:img-style = "{ 'max-width': '100%', 'max-height': '100%' }"                    
						:class = "cropperImgSrc == '' ? 'loading' : 'loaded'" />
				</div>                
			</div>
		</div>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button
			size="small"
			@click.prevent="cropperCancel()">取 消</el-button>
		<el-button
			type="primary"
			size="small"
			@click.prevent="cropperStart()"
			v-loading="cropperUploadloading">确 定</el-button>
	</div>
</el-dialog>

import VueCropper from 'vue-cropperjs';

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      // 图片剪裁
      cropperVisible: false,
      cropperLoading: false,
      cropperUploadloading: false,
      cropperRadioVal: 1,
      cropperAspectWH: 1,
      cropperImgSrc: '',
      cropperImg: '',
      cropperData: null,
      cropperForm: {
        id: 0,
        purpose: 2,
        group_id: 0,
        file_name: '',
        file_address: '',
      }
    }
  },
  
  // 图片裁剪
  piccropper(scope, index) {
    var that = this;

    // console.log(scope.id);
    that.cropperVisible = true;
    that.cropperImgSrc = '';

    if(scope.id){
      that.cropperForm.id = scope.id;
      that.$http.post("/api/PictureOpera", {
        id: that.cropperForm.id,
        businessType: 'api.picture.opera',
        type: "op.get.img"
      })
      .then(res => {
        if (res.data.code == 0) {
          that.cropperForm = res.data.result;
          //this.$message("成功");
          //保存图片到本地
          that.$http.post("/Upload/LocalDownLoadImage", {
            id: res.data.result.id,
            Url:res.data.result.file_address,
            FileName: res.data.result.file_name
          })
          .then(res1 => {
            if (res1.data.code == 0) {
              //that.$message("图片保存本地成功");
              that.cropperImgSrc = res1.data.imgurl;
              that.$refs.cropper.replace(res1.data.imgurl);
            } else {
              that.$message(res1.data.msg);
            }
            that.cropperLoading = false;
          })
        } else {
          that.$message(res.data.msg);
        }
      })
    }else{
      console.log('ERROR: ID传参错误');
    }
  },

  //确定裁剪
  cropperStart() {
    this.cropperUploadloading = true;
    // get image data for post processing, e.g. upload or setting image src
    this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
    // console.log(this.cropImg);
    // 上传裁剪后的图片
    this.normTagIcoUpload2();
  },

  //上传图片
  normTagIcoUpload2: function() {
    let that = this;
    let formData = new FormData();
    
    //base64转文件
    var imgFile = that.dataURLtoFile(that.cropImg,that.cropperForm.file_name);
    // console.log("正在上传的文件:");
    // console.log(imgFile);
    // return false;
    formData.append("oldFile", that.imgSrc);//本地原图地址
    formData.append("file", imgFile);
    formData.append("purpose", that.cropperForm.purpose);
    formData.append("group_id", that.cropperForm.group_id);
    formData.append("fileName", that.cropperForm.file_name);
    let config = {"Content-Type": "multipart/form-data"};
    
    that.$http
      .post("/upload/CropperSaveImage", formData, {
        headers: config
      }).then(function(res) {
        that.cropperUploadloading = false;

        if (res.data.ok) {
          that.$message("图片裁剪成功");
        } else {
          that.$message("图片裁剪失败");
        }

        // 异步更新数据
        that.cropperVisible = false;
        that.pictureData();
        // that.$router.push('/api/List');
      })
      .catch(function(error) {
        that.$message("ajax error");
      });

    // 初始化默认数据
    
  },

  // 关闭操作框
  cropperClose(){
    var that = this;

    that.cropperVisible = false;
  },

  // 取消操作框
  cropperCancel(){
    var that = this;

    that.cropperVisible = false;
  },

  //将图片Base64 转成文件
  dataURLtoFile(dataurl, filename) {
    // console.log("转文件")
    // 获取文件扩展名称
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1];
    var extension=mime.split("/")[1];

    var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename+"."+extension, {type:mime});
  },
  cropperRadioChange(e){
    this.aspectWH=e;
    // console.log("当前比例:");
    // console.log(this.aspectWH);
    this.$refs.cropper.setAspectRatio(this.aspectWH);
  },
  cropperFlipX() {
    const dom = this.$refs.flipX;
    let scale = dom.getAttribute('data-scale');
    scale = scale ? -scale : -1;
    this.$refs.cropper.scaleX(scale);
    dom.setAttribute('data-scale', scale);
  },
  cropperFlipY() {
    const dom = this.$refs.flipY;
    let scale = dom.getAttribute('data-scale');
    scale = scale ? -scale : -1;
    this.$refs.cropper.scaleY(scale);
    dom.setAttribute('data-scale', scale);
  },
  cropperMove(offsetX, offsetY) {
    this.$refs.cropper.move(offsetX, offsetY);
  },
  cropperReset() {
    this.$refs.cropper.reset();
  },
  cropperRotate(deg) {
    this.$refs.cropper.rotate(deg);
  },
  cropperZoom(percent) {
    this.$refs.cropper.relativeZoom(percent);
  },
  cropperGetCropBoxData() {
    this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4);
  },
  cropperGetData() {
    this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4);
  },
  cropperSetCropBoxData() {
    if (!this.data) return;

    this.$refs.cropper.setCropBoxData(JSON.parse(this.data));
  },
  cropperSetData() {
    if (!this.data) return;

    this.$refs.cropper.setData(JSON.parse(this.data));
  },
  cropperSetImage(e) {
    const file = e.target.files[0];

    if (file.type.indexOf('image/') === -1) {
      alert('Please select an image file');
      return;
    }

    if (typeof FileReader === 'function') {
      const reader = new FileReader();

      reader.onload = (event) => {
        this.cropperImgSrc = event.target.result;
        // rebuild cropperjs with the updated source
        this.$refs.cropper.replace(event.target.result);
        console.log(event.target.result);
      };

      reader.readAsDataURL(file);
    } else {
      alert('Sorry, FileReader API not supported');
    }
  },
  cropperShowFileChooser() {
    this.$refs.input.click();
  }
}

<style >
@import "../../../assets/css/cropper.css";
</style>