图片上传与裁切

install

$ npm install @nodetech/vue-avatar
// or
$ yarn add @nodetech/vue-avatar

development

$ yarn
$ yarn dev

use

<style lang="less">
html, body {
  height: 100%;
  height: 100vh;
}
html {
  font-size: 14px;
}
body {
  background-color: #e0e0e0;
}
.window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #ffffff;
  border-radius: .2rem;
}
</style>

<template>
  <div class="window">
    <vue-avatar :image="demo.image"
                :preview="demo.preview"
                :showHandle="demo.showHandle"
                :uploadTips="demo.uploadTips"
                :previewCircle="demo.previewCircle"
                :previewSizes="demo.previewSizes"
                :cropperStyle="demo.cropperStyle"
                :cropperOptions="demo.cropperOptions"
                :onSave="onSave"
                :imgLoad="imgLoad" />
  </div>
</template>

<script>
import VueAvatar from '@nodetech/vue-avatar'
export default {
  components: {
    VueAvatar
  },
  data() {
    return {
      demo: {
        // 图片地址或 input选择的文件
        image: '',
        // 开启裁切预览
        preview: true,
        // 显示操作按钮 支持放大缩小 
        showHandle: true,
        // 上传提示语
        uploadTips: '点击上传文件，或将图片文件拖至此处',
        // 圆形预览图
        previewCircle: true,
        // 裁切区样式
        cropperStyle: {
          width: '320px',
          height: '320px'
        },
        // 裁切预览展示尺寸
        previewSizes: [128, 64, 32],
        // 输出文件类型
        outputType: 'png',
        // 裁切器参数
        cropperOptions: {
          size: 1, // 
          full: false, // 舒服三个月成功已原图比例的截图
          canMove: true, // 可移动图片
          canMoveBox: true, // 可移动裁切框
          fixedBox: true, // 固定截图框大小
          original: false, // 显示图片原始尺寸
          autoCrop: true, // 自动裁切
          autoCropWidth: 200, // 自动裁切大小
          autoCropHeight: 200, // 自动裁切大小
          centerBox: true, // 限制在图片内部
          high: false, // 截图信息展示是否是真实的输出宽高
          infoTrue: true, // 截图信息展示是否是真实的输出宽高
          enlarge: 1, // 是否按照截图框比例输出
          mode: 'contain' // 图片默认渲染方式 类似这些 ['contain', 'cover', '400px auto', 'auto 400px', '50%', 'auto 50%']
        }
      }
    }
  },
  methods: {
    // 保存按钮事件
    onSave(base64, blob) {
      console.log(base64, blob)
    },
    imgLoad(msg) {
      console.log(msg)
    }
  }
}
</script>