zoukankan      html  css  js  c++  java
  • VueCropper 图片裁剪

    基于vue的图片裁剪vue-cropper

    96 
    简小咖 
     0.2 2018.12.12 15:42 字数 164 阅读 3900评论 1

    vue-cropper官网
    http://xyxiao.cn/vue-cropper/example/

    需求:上传图片之前,按照一定比例进行剪裁,剪裁后上传到服务器


     
    image.png

    安装

    npm install vue-cropper

    使用

    main.js里面

    import VueCropper from 'vue-cropper'
    Vue.use(VueCropper)
    

    组件内

    • 1、上传按钮
      <!-- element 上传图片按钮 -->
          <el-upload class="upload-demo" action="" drag 
    :auto-upload="false" :show-file-list="false" :on-change='changeUpload'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击上传</div>
            <div class="el-upload__tip">支持绝大多数图片格式,单张图片最大支持5MB</div>
          </el-upload>Ï
    
     
    image.png

    使用element-ui的上传按钮,要配置:auto-upload="false"(不要自动上传), :on-change='changeUpload'(选择完图片后的方法),一会儿再交代changeUpload方法

    • 2、设置一个弹出层,放剪裁图片的cropper
     <!-- vueCropper 剪裁图片实现-->
        <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
          <div class="cropper-content">
            <div class="cropper" style="text-align:center">
            <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
              ></vueCropper>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
          </div>
        </el-dialog>
    
    • 3、剪裁框的样式
    // 截图
    .cropper-content {
        .cropper {
             auto;
            height: 300px;
        }
    }
    
    • 4、方法
      option是剪裁插件的属性配置,具体更多含义查看官网介绍
    <script>
    import { client } from '@/utils/alioss'
    export default {
      data() {
        return {
          dialogVisible: false,
          // 裁剪组件的基础配置option
          option: {
            img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: 'jpeg', // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            // autoCropWidth: 300, // 默认生成截图框宽度
            // autoCropHeight: 200, // 默认生成截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [7, 5], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            canMoveBox: false, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          },
          picsList: [],  //页面显示的数组
          // 防止重复提交
          loading: false
        }
      },
      methods: {
        // 上传按钮   限制图片大小
        changeUpload(file, fileList) {
          const isLt5M = file.size / 1024 / 1024 < 5
          if (!isLt5M) {
            this.$message.error('上传文件大小不能超过 5MB!')
            return false
          }
          this.fileinfo = file
    
          // 上传成功后将图片地址赋值给裁剪框显示图片
          this.$nextTick(() => {
            this.option.img = file.url
            this.dialogVisible = true
          })
        },
        // 点击裁剪,这一步是可以拿到处理后的地址
        finish() {
          this.$refs.cropper.getCropBlob((data) => {
            var fileName = 'goods' + this.fileinfo.uid
            this.loading = true
           //上传阿里云服务器
            client().put(fileName, data).then(result => {
              this.dialogVisible = false
              this.picsList.push(result.url)
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          })
        }
      }
    }
    </script>
    
     
  • 相关阅读:
    MongoDB 释放磁盘空间 db.runCommand({repairDatabase: 1 })
    RK 调试笔记
    RK Android7.1 拨号
    RK Android7.1 移植gt9271 TP偏移
    RK Android7.1 定制化 itvbox 盒子Launcher
    RK Android7.1 双屏显示旋转方向
    RK Android7.1 设置 内存条作假
    RK Android7.1 设置 蓝牙 已断开连接
    RK Android7.1 进入Camera2 亮度会增加
    RK 3128 调触摸屏 TP GT9XX
  • 原文地址:https://www.cnblogs.com/mouseleo/p/11087010.html
Copyright © 2011-2022 走看看