基于插件库vue-cropper裁剪固定尺寸的图片

最新推荐文章于 2024-02-21 19:21:24 发布
最新推荐文章于 2024-02-21 19:21:24 发布
阅读量2.5k 收藏 6
点赞数 1
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/116129723
版权

需求

vue-cropper官网
https://github.com/xyxiao001/vue-cropper

需求：上传图片之前，进行剪裁成690*350尺寸的图片，剪裁后上传到服务器

在这里插入图片描述

步骤

  • 安装

     npm install vue-cropper

  • 使用
    main.js里面全局使用

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

  • 组件使用 --父组件
    在这里插入图片描述

	<el-form-item  label="添加封面" prop="imageUrl">
      <userAvatar :user="form.imageUrl" @getimg="getavatar" v-if="flag"/>
     </el-form-item>
     
     // 引入子组件
   import userAvatar from "./userAvatar";
   components: { userAvatar},
   // 获取头像地址 父子传参-->子传父 函数
       getavatar(val){
         this.form.imageUrl = val
       },
  • 组件使用 --封装子组件userAvatar
    在这里插入图片描述

template

<template>
  <div>
    <div class="avr" @click="editCropper()" v-show="isup">
      <i class="el-icon-plus"></i>
    </div>
    <img v-show="!isup" v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg190" />
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
      <el-row>
        <el-col :xs="24" :md="14" :style="{height: '450px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :output-size="options.size"
            :output-type="options.outputType"
            :info="options.info"
            :full="options.full"
            :canScale="options.canScale"
            :can-move="options.canMove"
            :can-move-box="options.canMoveBox"
            :fixed="options.fixed"
            :fixed-box="options.fixedBox"
            :original="options.original"
            :auto-crop="options.autoCrop"
            :auto-crop-width="options.autoCropWidth"
            :auto-crop-height="options.autoCropHeight"
            :center-box="options.centerBox"
            :high="options.high"
            :info-true="options.infoTrue"
            :max-img-size="options.maxImageSize"
            :enlarge="options.enlarge"
            :mode="options.mode"
            :maxImgSize="options.maxImgSize"
            @realTime="realTime"
            v-if="visible"
          />
        </el-col>
        <el-col :xs="24" :md="10" :style="{height: '350px'}">
          <div class="avatar-upload-preview zidingyi">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :md="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :md="2">
          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

script

<script>
import { VueCropper } from "vue-cropper";
import { uploadAvatarHttp } from "@/api/system/user";
export default {
  components: { VueCropper },
  props: {
    user: '',// 接收父组件的url值
  },
  data() {
    return {
      isup: true,
      // 是否显示弹出层
      open: false,
      // 是否显示cropper
      visible: false,
      // 弹出层标题
      title: "上传封面",
      options: {
        img: this.user, //裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        full: false, // 是否输出原图比例的截图
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 175, // 默认生成截图框高度
        canMove: true, // 上传图片是否可以移动
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        height: true,
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge: 2, // 图片根据截图框输出比例倍数
        mode: 'cover', // 图片默认渲染方式
        maxImgSize: 690 // 限制图片最大宽度和高度
      },
      previews: {}
    };
  },
  mounted(){
    console.log(this.user)
    if(this.options.img){
      this.isup = false
    }else{
      this.isup = true
    }
  },
  methods: {
    // 编辑头像
    editCropper() {
      console.log('1')
      this.open = true;
    },
    // 打开弹出层结束时的回调
    modalOpened() {
      console.log('2')
      this.visible = true;
    },
    // 覆盖默认的上传行为
    requestUpload() {
    },
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 上传预处理
    beforeUpload(file) {
      console.log(file)
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    // 上传图片
    uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        // 利用File Api中blob转成File对象
        let files = new window.File([data], 'fileName.jpg')
        formData.append("file", files);
        console.log(files)
        uploadAvatarHttp(formData,1).then(response => { // uploadAvatarHttp上传封装的函数
          this.open = false;
          this.options.img = response.data.url;
          // this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
          if(this.options.img){
            this.isup = false
          }else{
            this.isup = true
          }
          this.$emit('getimg',this.options.img)
          // store.commit('SET_AVATAR', this.options.img);
          // this.msgSuccess("修改成功");
          this.visible = false;
        });
      });
    },
    // 实时预览
    realTime(data) {
      this.previews = data;
      console.log(this.previews)
    }
  }
};
</script>
<style scoped>
.img-lg190{
  width: 315.4px;
  height: 160px;
  border-radius: 0;
}
.avr{
  width: 315px;
  height: 160px;
  border: 1px solid #E3E3E3;
  border-radius: 2px;
  line-height: 190px;
  text-align: center;
}
.el-icon-plus{
  font-size: 40px;
  color: #E3E3E3;
}
.zidingyi{
    width: 345px;
    height: 175px;
    border-radius: 0;
    transform:scale(0.7);
}
</style>
  • 解释
    上传逻辑
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              上传
         <i class="el-icon-upload el-icon--right"></i>
         </el-button>
       </el-upload>

before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
http-request：覆盖默认的上传行为，可以自定义上传的实现
show-file-list：是否显示已上传文件列表

// 上传预处理
    beforeUpload(file) {
      console.log(file)
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },

FileReader 对象:允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
使用 File 或 Blob 对象指定要读取的文件或数据。
readAsDataURL file 将文件读取为 DataURL
onload 文件读取成功完成时触发
更多参考：https://www.jianshu.com/p/cde728c4e334

<vue-cropper
            ref="cropper"
            :img="options.img"
            :output-size="options.size"
            :output-type="options.outputType"
            :info="options.info"
            :full="options.full"
            :canScale="options.canScale"
            :can-move="options.canMove"
            :can-move-box="options.canMoveBox"
            :fixed="options.fixed"
            :fixed-box="options.fixedBox"
            :original="options.original"
            :auto-crop="options.autoCrop"
            :auto-crop-width="options.autoCropWidth"
            :auto-crop-height="options.autoCropHeight"
            :center-box="options.centerBox"
            :high="options.high"
            :info-true="options.infoTrue"
            :max-img-size="options.maxImageSize"
            :enlarge="options.enlarge"
            :mode="options.mode"
            :maxImgSize="options.maxImgSize"
            @realTime="realTime"
            v-if="visible"
          />
options: {
        img: this.user, //裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        full: false, // 是否输出原图比例的截图
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 175, // 默认生成截图框高度
        canMove: true, // 上传图片是否可以移动
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        height: true,
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge: 2, // 图片根据截图框输出比例倍数
        mode: 'cover', // 图片默认渲染方式
        maxImgSize: 690 // 限制图片最大宽度和高度
      },

vue-cropper插件注释
裁剪为690*350
	autoCropWidth: 345, // 默认生成截图框宽度
	autoCropHeight: 175, // 默认生成截图框高度
	enlarge: 2, // 图片根据截图框输出比例倍数
	full: false, // 是否输出原图比例的截图
	fixedBox: true, // 固定截图框大小 不允许改变
    fixed: false, // 是否开启截图框宽高固定比例
    original: false, // 上传图片按照原始比例渲染

点击提交传url地址给父组件

uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        // 利用File Api中blob转成File对象
        let files = new window.File([data], 'fileName.jpg')
        formData.append("file", files);
        console.log(files)
        uploadAvatarHttp(formData,1).then(response => { // uploadAvatarHttp上传封装的函数
          this.open = false;
          this.options.img = response.data.url;
          // this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
          if(this.options.img){
            this.isup = false
          }else{
            this.isup = true
          }
          this.$emit('getimg',this.options.img) // 子传父
          this.visible = false;
        });
      });
    },
Best_卡卡
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
基于vue的图片裁剪插件vue-cropper
热门推荐
Dreamer_xr的博客
09-28 3万+
我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的， 我这里采用了4:3的固定比例进行裁剪，裁剪后的效果 但是裁剪后的图片路径是base64，超级长的路径，最终还是需要处理地址传给后端的，项目用oss处理图片，最终获得一个类似于aad68a8fd57746...
cropper基本用法（图片裁剪插件用法）
最新发布
高艳艳的博客！
02-21 550
【代码】【无标题】cropper基本用法（图片裁剪插件用法）
vue移动端裁剪图片结合插件Cropper的使用实例代码
08-30
本篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
cropper制作图片裁剪不失真
08-23
cropper非常强大，做出的图片裁剪插件不失真，可用于裁剪图片，banner,头像等等
cropperjs裁剪固定尺寸图片-----已实践
lbchenxy的博客
07-23 4527
最近项目又用到了cropper，但是这次需求跟之前不同的是，这次的需求裁剪出来的图片要是固定尺寸的图片，而不是长宽比尺寸的图。于是在网上搜索了半天，发现貌似没有方法，只好去看文档https://github.com/fengyuanchen/cropperjs了。在文档中看到了希望。 var canvas = cropper.getCroppedCanvas({ width:236,//输出画布的目标宽度 height:146,//输出画布的目标高度。
vue利用cropperjs实现图片按比例裁剪
han_0111的博客
07-03 717
vue中利用cropperjs实现图片按比例裁剪，缩放，旋转。
vue 图片裁剪
张小胖
07-21 266
官方文档传送门 效果图 文档备注
VUE中使用vue-cropper实现图片裁剪，及问题总结
weixin_69580737的博客
07-07 6755
template><el-dialogtitle="裁切封面"/></div></div>--预览效果图--></div></div></div><el-button icon="el-icon-plus" @click="scaleBigger">放大</el-button><el-button icon="el-icon-minus" @click="scaleSmaller">缩小</el-button>
vue-cropper裁切尺寸问题
Zhou_xiaoqian的博客
01-12 4765
vue-cropper中对裁切尺寸的控制有： autoCropWidth: "max", // 默认生成截图框宽度 autoCropHeight: "max", // 默认生成截图框高度 fixed: true, // 是否开启截图框宽高固定比例 fixedNumber: [1, 1], // 截图框的宽高比例 enlarge: 1, // 图片根据截图框输出比例倍数 1、默认生成裁切框宽度、高度，应该不用说了吧，就是裁切框的宽高，如果设置了宽高，这时候裁切比例fixedNumber是不起作用的
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅的头像裁剪和上传插件。 正在安装 $ npm i vue-avatar-cropper 用法 < template> < div xss=removed> < img xss=removed xss=removed> < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
【JavaScript源代码】vue图片裁剪插件vue-cropper使用方法详解.docx
12-29
vue图片裁剪插件vue-cropper使用方法详解 　　本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下　　我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，　　我这里采用了4:3的固定比例进行裁剪，裁剪后的效果　　但是裁剪后的图片路径是base64，超级长的路径，最终还是需要处理地址传给后端的，项目用oss处理图片，最终获得一个类似于aad68a8fd577464dbcdead2e9b20084d这个的后缀传给
Vue中如何进行图片裁剪与上传？
IT徐师兄
06-12 2179
本文介绍了Vue中如何进行图片裁剪和上传，通过使用vue-cropper和vue-axios插件，可以快速实现这些功能。当然，除了这两个插。
vue-cropper裁剪图片后压缩上传
weixin_39152200的博客
11-17 1268
vue-cropper上传后返回一个file文件 但是经常出现图片过大的问题 所以上传后使用localResizeIMG进行压缩 第一步：安装localResizeIMG npm i lrz -S 第二步： 在相应位置引入 import lrz from 'lrz' 第三步：压缩 this.imgUrl = URL.createObjectURL(file, { quality: 0 }) let quality = 1 // 根据图片大小设置压缩比例 if (file.size >= 1024
vue做图片裁剪——vue-cropper
Lora_0925的博客
06-20 2540
这里使用的是vue-cropper 官方文档以及案例在这里先安装 裁剪图片组件注意事项：1.代码中设置的是只有正确的url是才展示，裁剪组件2.需要给容器固定高度3.props传值可自行加减 具体使用（这里使用的是antd） 效果图...
VUE图片裁剪工具VueCropper的使用方法
CoreCmd的博客
12-11 1241
安装依赖 npm install vue-cropper --save-dev 前端代码 <template> <div id="imageCropper"> <Row class="mt-2"> <Col> <Button type="default" @click="changeScale(1)" ...
vue图片裁剪固定尺寸/vue-cropper的使用
pany的博客
07-30 2778
需求: 用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理) 解决: 使用vue-cropper插件完成 插件官网: https://github.com/xyxiao001/vue-cropper 效果图片: 代码: 安装依赖 npm install vue-cropper 全局挂载(main.js文件中) import VueCropper from 'vue-cropper' Vue.use(VueCropper) 组件代码 <template>
史上最全基于vue的图片裁剪vue-cropper使用
10-18
好的，关于史上最全基于vue的图片裁剪vue-cropper使用，你可以参考以下步骤： 1. 安装vue-cropper插件：在终端中输入npm install vue-cropper --save命令进行安装。 2. 在需要使用的组件中引入vue-cropper：在组件中引入import VueCropper from 'vue-cropper'，并在components中注册。 3. 在模板中使用vue-cropper：在模板中使用<vue-cropper>标签，并绑定相关属性和事件。 4. 设置图片裁剪的参数：设置裁剪框的大小、裁剪框的比例、裁剪后图片的大小等参数。 5. 获取裁剪后的图片：通过监听裁剪完成事件，获取裁剪后的图片数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值