专栏首页前端开发随笔vue-cropper裁剪图片

vue-cropper裁剪图片

文档地址

安装

npm install vue-cropper

组件引入

import { VueCropper } from "vue-cropper";
  components: {
    VueCropper,
  },

完整代码

<template>
  <div class="box">
    <div class="crop">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :autoCrop="option.autoCrop"
      ></vueCropper>
    </div>
    <div class="btn">
      <el-button type="primary" @click="getCropData()">截图</el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-left"
        @click="rotateLeft()"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        @click="rotateRight()"
      ></el-button>
      <el-button type="primary" @click="refresh()">重置</el-button>
    </div>
    <img class="pic" :src="imgUrl" alt="" />
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      option: {
        img: "https://sucai.suoluomei.cn/sucai_zs/images/20201009165025-bg.png", // 裁剪图片的地址
        autoCrop: true, //是否默认生成截图框
        fixedBox: true, //固定截图框大小 不允许改变
      },
      imgUrl: "",
    };
  },
  methods: {
    // 左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 重置
    refresh() {
      this.$refs.cropper.refresh();
    },
    // 生成blob图片
    getCropData() {
      this.$refs.cropper.getCropData((data) => {
        this.imgUrl = data;
      });
    },
  },
};
</script>

<style scoped>
.box {
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.crop,
.pic {
  width: 600px;
  height: 400px;
  object-fit: cover;
}
.btn {
  display: flex;
  flex-direction: column;
}
.btn button {
  margin: 10px 0;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • swiper.animate实现轮播展示动画效果

    任我行RQ
  • scrollReveal实现网页重复动画效果

    任我行RQ
  • ElementUI实现表格分页功能

    任我行RQ
  • Hive 性能调优,这 9 点都掌握了?

    显然 fctOrder 表的记录要比 employees 多上好几个数量级。将 fctOrders 放在第一位导致第一遍 map 跑批的数据量增大。因此当尽量在...

    Lenis
  • 商汤科技20篇论文入选ICCV 2017,披露最新研究主线

    来源自 商汤科技 量子位 出品 | 公众号 QbitAI 本月22-29日,是两年一度的国际计算机视觉大会(ICCV)召开的日子。 于往届ICCV相比,本届 I...

    量子位
  • 单元测试框架系列教程2-写第一个基于TestNG的用例

    前面一篇《单元测试框架系列教程1-TestNG简介》,介绍了TestNG的特点和官网地址,以及在IDEA上的配置过程。这篇,我们就来动手写一个基于TestNG的...

    凯哥Java
  • CSS篇-面试题3-实现一个三列布局-两侧两列宽 100px-中间一列自适应

    上面主要利用的是弹性flex布局,父级元素设置display:flex,两边元素固定宽度,中间自适应使用flex:1,便会实现自动的自适应

    itclanCoder
  • require.js 循环依赖介绍

    在a执行到require('b')的地方时会停下来去调用b,当去执行b,执行到一半发现require('a'),就停下来去调用a。

    用户7576687
  • 想学FM系列(4)-SAP FM模块:主数据(2)

    3.1.1.2 承诺项目主数据维护 ? 1)FMCIA - 单个处理 维护单个的承诺项目。 ? ① image.png ② 直接可记账的:该承诺项目可以在预算生...

    SAP最佳业务实践
  • R语言可视化——地图与气泡图结合应用

    今天跟大家分享如何在地图上进行散点图、气泡图绘制。 昨天跟大家介绍了ggplot函数进行地图绘制的原理,通过轮廓点和分组来定义每一个地区(国家边界),通过多边形...

    数据小磨坊

扫码关注云+社区

领取腾讯云代金券