【前端 VUE】vue 图片剪切

templateCreat。vue 弹框组件

<template>

  <div v-if="showDialog" class="dialog">

    <div v-if="showDialog" class="back-drop"></div>

    <div class="alert" :class="{'alert-active':showDialogActive,'alert-big':big,'alert-middle':middle}" :style="'width:'+width+'px'">

      <div class="title" >

        <span style="padding-left:16px;">{{title}}</span>

        <i v-if="closes" @click="close" style="margin-right:12px;" class="el-message-box__close el-icon-close cursor"></i>

      </div>

      <div class="dialog-content">

        <slot></slot>

      </div>

    </div>

  </div>

</template>

<script>

import { setTimeout } from "timers";

export default {

  name: "v-templateCreat",

  props: {

    title: {

      type: String,

      default: "温馨提示"

    },

    middle:{

      type:Boolean,

      default:false

    },

    big:{

      type:Boolean,

      default:false

    },

    width: {

      default: 498

    },

    open:Boolean,

    closes: {

      type: Boolean,

      default: true

    },

  },

  data() {

    return {

      showDialog: false,

      templateCreat: false,

      showDialogActive: false,

    };

  },

  methods: {

    close() {

      this.showDialogActive = false;

      this.$emit('update:open', false);

      setTimeout(() => (this.showDialog = false), 300);

    },

    openFn(){

      this.showDialog = true;

      this.checkDom();

    },

    checkDom(){

      let timer = null;

      let dom = document.body.querySelector('.dialog');

      if(dom){

        this.showDialogActive = true

        if(!timer) clearTimeout(timer);

      }

      else

      {

        timer = setTimeout(()=>this.checkDom(),0);

      }

    },

  },

  watch: {

    open: {

      handler(newName, oldName) {

          if(newName) this.openFn();

          if(!newName) this.close();

        },

        immediate: true,

        deep: true

      }

  },

  mounted(){

 

  }

};

</script>

<style lang="scss">

.dialog {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0);

  z-index: 106;

  .back-drop {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4);

    z-index: 106;

  }

  .alert {

    width: 498px;

    min-height: 260px;

    // overflow-y: scroll;

    background: #fff;

    left: calc(50% - 249px);

    top: calc(50% - 280px);

    position: fixed;

    z-index: -1;

    transform: scale(1.23);

    opacity: 0;

    transition: all 0.3s;

    position: relative;

    .title {

      height: 44px;

      justify-content: space-between;

      display:flex;

      width: 100%;

      background: #f2f2f2;

      align-items: center;

      font-size: 16px;

    }

    .message {

      padding: 18px;

      min-height: 100px;

      overflow: auto;

    }

  }

  .alert-middle{

    width:614px !important;

    left:calc(50% - 307px);

  }

  .alert-big{

    width:748px !important;

    left:calc(50% - 374px);

  }

  .alert-active {

    z-index: 9999;

    transform: scale(1);

    opacity: 1;

  }

}

</style>

//index。vue 图片剪切

<template>

  <div class="login">

 

        <label class="btn" for="uploads">upload</label>

        <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"

            @change="uploadImg($event, 1)">

            <templateCreat :open.sync="couponParticularsShowTemplate" title="图片裁剪" class="couponParticulars">

              <div class="cut">

                <vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full"

                  :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original"

                  :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"

                          @real-time="realTime" :high="option.high"

                    @img-load="imgLoad" mode="cover"></vue-cropper>

              </div>

              <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">

                <div :style="previews.div">

                  <img :src="previews.url" :style="previews.img">

                </div>

              </div>

            </templateCreat>

  </div>

</template>

<script>

import  {VueCropper} from 'vue-cropper'

import  templateCreat  from '@/components/templateCreat';

export default {

      name: "Login",

      data() {

        return {

          couponParticularsShowTemplate:false,

          previews: {},

          option: {

            img: 'https://qn-qn-kibey-static-cdn.app-echo.com/goodboy-weixin.PNG',

            size: 1,

            full: false,

            outputType: 'png',

            canMove: true,

            fixedBox: false,

            original: false,

            canMoveBox: true,

            autoCrop: true,

            // 只有自动截图开启 宽度高度才生效

            autoCropWidth: 200,

            autoCropHeight: 150,

            centerBox: false,

            high: true

          },

        }},

        components: {

          VueCropper,templateCreat

        },

        methods: {

 

          // 实时预览函数

          realTime(data) {

            this.previews = data

            console.log(data)

          },

          uploadImg(e, num) {

            //上传图片

            // this.option.img

            var file = e.target.files[0]

            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {

              alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')

              return false

            }

            var reader = new FileReader()

            reader.onload = (e) => {

              let data

              if (typeof e.target.result === 'object') {

                // 把Array Buffer转化为blob 如果是base64不需要

                data = window.URL.createObjectURL(new Blob([e.target.result]))

              } else {

                data = e.target.result

              }

              if (num === 1) {

                this.option.img = data

              } else if (num === 2) {

                this.example2.img = data

              }

            }

            // 转化为base64

            // reader.readAsDataURL(file)

            // 转化为blob

            reader.readAsArrayBuffer(file)

            this.couponParticularsShowTemplate = !this.couponParticularsShowTemplate

          },

          imgLoad(msg) {

            console.log(msg)

          }

        },

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">

      .cut {

        width: 300px;

        height: 300px;

        margin: 30px auto;

      }

</style>

vue-cropper 一个简单快捷使用的图片裁剪插件 https://www.vue-js.com/topic/5934bfc3fbaee51e2432c244

vue-cropper 不使用npm  https://github.com/xyxiao001/vue-cropper