是是是
效果:
1. vue-cropper裁剪组件详细介绍可关注:vue裁剪组件vue-cropper_大大。的博客-CSDN博客_vue-cropper
2.代码
# npm 安装npm install vue-cropper# yarn 安装yarn add vue-croppermain.js文件import VueCropper from 'vue-cropper'Vue.use(VueCropper)
<template><div><el-dialogtitle="图片剪裁比例(500 x 300)"width="1000px"height="600px"class="cropper_dialog":visible.sync="dialogVisible"append-to-body><div class="cropper-content"><div class="cropper" style="text-align: center"><vueCropperref="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"></vueCropper></div></div><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false"><i class="iconfont iconcancel01"></i> 取 消</el-button><el-button type="primary" @click="finish"><i class="iconfont iconok01"></i> 确 认</el-button></div></el-dialog></div></template><script>export default {data(){return{dialogVisible:false,option: {img: "", // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: "jpeg", // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: 300, // 默认生成截图框宽度autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [500, 300], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: false, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},}},methods:{//1.图片上传成功事件 自己根据而自己的上传组件获取上传img的srcuploadFolderClick(e) {const _this = this;let _file = e.target.files[0];let reader = new FileReader();reader.readAsDataURL(_file);reader.onload = function (e) {let image = new Image();image.src = e.target.result;//option.img赋值_this.option.img = image.src;_this.dialogVisible = true;};},}//2.确定剪裁finish() {this.$refs.cropper.getCropBlob((data) => {let file = new File([data], "gfgffg" + ".jpeg", {lastModified: new Date(, 1, 1),});console.log(data);console.log(file);this.fileData = [[file]];//3.拿到对应的参数,接下来就是掉接上传接口});},}</script>
