vue-cropper裁剪图片
时间:2022-07-26
本文章向大家介绍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>
- HDUOJ----4502吉哥系列故事——临时工计划
- HDUOJ----4004The Frog's Games(二分+简单贪心)
- HDUOJ----4006The kth great number(最小堆...)
- HDUOJ----4501小明系列故事——买年货(三维背包)
- message 弹出窗口
- HDUOJ---1862EXCEL排序
- HDUOJ-----3591The trouble of Xiaoqian
- HDUOJ-----2571跳舞毯
- Facebook开源PyTorch版本fairseq翻译模型,训练速度提高50%
- MySQL数据清理的需求分析和改进
- Go 语言常量
- Go 语言结构
- Go 语言函数
- Go语言指针
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法