通过上传图片,在本地实现对图片的放大、缩小、旋转、裁剪操作,迅速简便地实现简单的在线图片编辑效果。
>[info] 显示效果
第一步:选择图片
![](https://img.kancloud.cn/85/8f/858fa7bed8517e02659c7c8b601321a7_681x318.png)
第二步:裁剪、旋转
![](https://img.kancloud.cn/df/42/df42f9ecbc09cce0b91cfebdeb03af8c_716x601.png)
>[info] 示例代码
```
<template>
<el-container>
<el-main>
<el-row>
<el-col :span="18">
<el-upload :auto-upload="false" :on-change="changeUpload"
:show-file-list="false" action drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传</div>
<div class="el-upload__tip">支持绝大多数图片格式,单张图片最大支持5MB</div>
</el-upload>
</el-col>
</el-row>
</el-main>
<!-- vueCropper 剪裁图片实现-->
<el-dialog :visible.sync="cropDialogVisible" append-to-body
title="图片剪裁">
<el-form :inline="true" :size="miniSize">
<el-container>
<el-main class="cropper-container">
<VueCropper :autoCrop="option.autoCrop"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:centerBox="option.centerBox" :fixed="option.fixed"
:fixedBox="option.fixedBox"
:fixedNumber="option.fixedNumber"
:full="option.full" :img="option.img" :info="true"
:infoTrue="option.infoTrue"
:original="option.original"
:outputSize="option.size"
:outputType="option.outputType" ref="cropper">
</VueCropper>
</el-main>
<el-footer>
<el-form-item>
<el-button-group>
<el-button @click="changeScale(1)"
icon="el-icon-ali-fangda" round
type="primary"></el-button>
<el-button @click="changeScale(-1)"
icon="el-icon-ali-suoxiao" round
type="primary"></el-button>
<el-button @click="rotateLeft"
icon="el-icon-ali-left" round
type="primary"></el-button>
<el-button @click="rotateRight"
icon="el-icon-ali-right" round
type="primary"></el-button>
</el-button-group>
</el-form-item>
</el-footer>
</el-container>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button :size="normalSize" @click="cropDialogVisible = false"
round>取 消</el-button>
<el-button :loading="loading" :size="normalSize"
@click="uploadCropData" round type="primary">确认</el-button>
</div>
</el-dialog>
</el-container>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
components: { VueCropper },
computed: {},
props: {
imgUrl: {
type: String,
default: "",
},
},
data () {
return {
normalSize: "small",
miniSize: "mini",
attachGroupId: 1,
attachId: 100,
loading: false,
cropDialogVisible: false,
// 裁剪组件的基础配置option
option: {
img: this.imgUrl, // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: "png", // 裁剪生成图片的格式
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
fixedBox: false, // 固定截图框大小 不允许改变
fixedNumber: [7, 5], // 截图框的宽高比例
full: false, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
cropper: null,
};
},
methods: {
// 上传按钮,限制图片大小
changeUpload (file, fileList) {
const _isLt5M = file.size / 1024 / 1024 < 5;
if (!_isLt5M) {
this.$notify.error({
title: "错误",
message: "上传文件大小不能超过 5MB!",
});
return false;
}
// 上传成功后将图片地址赋值给裁剪框显示图片
this.$nextTick(() => {
const _reader = new FileReader();
_reader.readAsDataURL(file.raw);
_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;
}
this.option.img = _data;
this.cropDialogVisible = true;
};
});
},
// 点击裁剪,这一步是可以拿到处理后的地址
uploadCropData () {
const _formData = new FormData();
this.$refs.cropper.getCropBlob((blobData) => {
this.loading = true;
// data是裁剪后图片的blob对象
_formData.append("file", blobData);
_formData.append("pathType", "attachment");
this.$axios({
url: "cms/upload",
method: "post",
data: _formData,
headers: { "Content-Type": "multipart/form-data" },
})
.then(async (result) => {
this.cropDialogVisible = false;
// 后续处理
this.loading = false;
})
.catch((err) => {
console.log(err);
this.loading = false;
});
})
},
// 放大/缩小
changeScale (num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 左旋转
rotateLeft () {
this.$refs.cropper.rotateLeft();
},
// 右旋转
rotateRight () {
this.$refs.cropper.rotateRight();
},
setDragMode () {
this.$refs.cropper.setDragMode("crop");
},
}
};
</script>
```
>[info] 属性说明参见vue-cropper 组件使用说明
- 介绍
- 快速了解
- 项目简介
- 主要特性
- 技术选型
- 内置功能
- 更新日志
- 环境部署
- 准备工作
- 运行系统
- 部署系统
- 环境变量
- nginx配置
- 项目介绍
- 文件结构
- 核心技术
- 技术文档
- 多语言环境配置
- 如何在vue项目中整合tinymce富文本编辑器
- vuedraggable在项目中的应用
- viewerjs在项目中的应用
- 用echart在vue项目中实现数据可视化
- 用webpack打包vue项目时如何实现性能调优
- CSS高度塌陷原理及解决方法
- CSS的几种定位机制
- 话说BFC
- export、export default和module.exports的用法及区别
- proto 和 prototype 深度剖析
- 服务端渲染的探索与实践
- 浏览器背后的运行机制
- 组件文档
- 基础组件
- 扩展按钮
- 扩展表格
- 定制面包屑
- 超级图片上传
- 地图定位
- 换肤调色板
- 富文本编辑器
- 视频上传
- 图片裁剪
- 表格树状列组件
- 自定义显示列
- 业务组件
- 更换头像
- 图片排序
- 地域选择
- 选择文章
- 文章分类选择
- 表单选择
- 商品选择
- 常见问题
- 捐赠支持
- 演示截图
- 功能列表