Vue2中使用vue-croper插件实现图片上传裁剪--超详细

最新推荐文章于 2024-04-22 17:03:20 发布
最新推荐文章于 2024-04-22 17:03:20 发布
阅读量3.2k 收藏 12
点赞数 4
分类专栏： vue vue-croper 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jing0921/article/details/123946678
版权

这类文章已经有人写了 但本人比较笨还是花费了大量的时间 这里写详细一点 希望有帮助
参考文章
史上最全基于vue的图片裁剪vue-cropper使用

  • 效果图
    在这里插入图片描述

  • 安装
    npm install vue-cropper 或者yarn add vue-cropper

  • 封装一个CropperImage组件

这里我对原文章的代码进行了修改 因为我这显示头像 不需要这么宽
在样式的修改上 大家都可以去尝试

<template>
  <div class="cropper-content">
    <div class="cropper-box">
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="realTime"
          @imgLoad="imgLoad"
        >
        </vue-cropper>
      </div>
      <div class="show-preview">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </div>
    </div>
    <div class="handle-cropper">
      <div class="scope-btn">
        <label class="btn" for="uploads">选择头像</label>
        <input
          type="file"
          id="uploads"
          style="position: absolute; clip: rect(0 0 0 0)"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="selectImg($event)"
        />
        <el-button
          size="mini"
          type="danger"
          plain
          icon="el-icon-zoom-in"
          @click="changeScale(1)"
          >放大</el-button
        >
        <el-button
          size="mini"
          type="danger"
          plain
          icon="el-icon-zoom-out"
          @click="changeScale(-1)"
          >缩小</el-button
        >
        <el-button size="mini" type="danger" plain @click="rotateLeft"
          >↺ 左旋转</el-button
        >
        <el-button size="mini" type="danger" plain @click="rotateRight"
          >↻ 右旋转</el-button
        >
      </div>
      <div class="upload-btn">
        <el-button size="mini" type="success" @click="onConfirm('blob')"
          >上传头像 <i class="el-icon-upload"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import { uploadImg } from '@/api/img'
import { updateUser } from '@/api/user'
import _ from 'lodash'
export default {
  name: 'CropperImage',
  components: {
    VueCropper
  },
  props: {
    initialImg: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      previews: {},
      option: {
        img: this.initialImg, // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'png', // 裁剪生成图片的格式（jpeg || png || webp）
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // false按原比例裁切图片，不失真
        fixedBox: true, // 固定截图框大小，不允许改变
        canMove: false, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        height: true, // 是否按照设备的dpr 输出等比例图片
        infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000, // 限制图片最大宽度和高度
        enlarge: 1 // 图片根据截图框输出比例倍数
      }
    }
  },
  methods: {
    // 初始化函数
    imgLoad (msg) {
      console.log('工具初始化函数=====' + msg)
    },
    // 图片缩放
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 向左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 向右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    // 实时预览函数
    realTime (data) {
      this.previews = data
    },
    // 选择图片
    selectImg (e) {
      const file = e.target.files[0]
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message({
          message: '图片类型要求：jpeg、jpg、png',
          type: 'error'
        })
        return false
      }
      // 转化为blob
      const reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.option.img = data
      }
      // 转化为base64
      reader.readAsDataURL(file)
    },
    // 上传图片
    onConfirm (type) {
      if (type === 'blob') {
        // 获取截图的blob数据
        this.$refs.cropper.getCropBlob((blob) => {
          this.updatePhoto(blob)
        })
      }
    },
    async updatePhoto (blob) {
      try {
        const formData = new FormData()
        formData.append('file', blob, '.jpg')
        const { data: res } = await uploadImg(formData)
        const filePath = { head: res.filePath }
        const { data: result } = await updateUser(filePath)
        if (result.code !== 0) {
          this.$message.error(result.msg)
        }
        const user = _.cloneDeep(this.$store.state.user)
        user.head = res.filePath
        this.$store.commit('setUser', user)
        this.$message.success('修改头像成功！')
        this.$emit('close')
      } catch (error) {
        this.$message.error('修改头像失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.cropper-content {
  display: flex;
  flex-direction: column;
  .cropper-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .cropper {
      width: 400px;
      height: 300px;
    }
    .show-preview {
      width: 250px;
      display: flex;
      justify-content: center;
      .preview {
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 50%;
        background: #fff;
        box-sizing: border-box;
      }
    }
  }
  .handle-cropper {
    margin-top: 30px;
    display: flex;
    .scope-btn {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding-right: 10px;
    }
    .upload-btn {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
    }
    .btn {
      outline: none;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      -webkit-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      padding: 8px 15px;
      font-size: 12px;
      border-radius: 3px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      margin-right: 10px;
    }
  }
}
</style>
</script>

<style scoped lang="less">
.cropper-content {
  display: flex;
  flex-direction: column;
  .cropper-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .cropper {
      width: 400px;
      height: 300px;
    }
    .show-preview {
      width: 250px;
      display: flex;
      justify-content: center;
      .preview {
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 50%;
        background: #fff;
        box-sizing: border-box;
      }
    }
  }
  .handle-cropper {
    margin-top: 30px;
    display: flex;
    .scope-btn {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding-right: 10px;
    }
    .upload-btn {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
    }
    .btn {
      outline: none;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      -webkit-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      padding: 8px 15px;
      font-size: 12px;
      border-radius: 3px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      margin-right: 10px;
    }
  }
}
</style>
  • 点击事件弹出弹框
<div class="img" @click="isShowImgPop = true"></div>
  • 在data中定义
data () {
    return {
      isShowImgPop: false
    }
  }
  • 弹框
<!-- 修改头像弹框 -->
    <el-dialog
      title="修改头像"
      :visible.sync="isShowImgPop"
      width="700px"
      center
    >
      <cropper-image
        :initialImg="head"
        @close="isShowImgPop = false"
      >
      </cropper-image>
    </el-dialog>
Liu_简爱
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式布局，适应移动 易于使用
使用正则限制input框只能输入数字/英文/中文等等
10-26
限制input框只能输入数字或英文的方法有很多，下面为大介绍下使用正则是如何实现的，感兴趣的朋友不要错过
vue-cropper图片裁剪（vue2与vue3）
Kylincsg的博客
03-27 790
  在项目中，前端开发经常会遇到有图片上传的需求,而别人的组件大多都满足不了当下产品的需求，这是往往我们得去依靠组件自己自定义一个项目通用的裁剪组件，废话不多说，上货…安装依赖: vue2： vue3： 引入相关文件 自定义封装裁剪组件父组件 cropper组件 - vue2： cropper组件 - vue3： 好了，以上就是vue2与vue3结合vue-cropper的图片裁剪组件的封装，下次结合饿了么el-upload再进行封装，欢迎评论留言！！
vue2中图片裁剪上传组件vue-cropper
qq_50952645的博客
06-01 2289
3、封装vuecropper，既可以在其他组件中使用。4、效果图，具体看看自己的业务需求。2、使用，在组件中引入插件。
vue2 结合 elementui 实现图片裁剪上传
最新发布
qq_57952018的博客
04-22 587
vue 实现图片裁剪上传。
Vue Cropper - 基于 Vue 开发的图片裁剪插件，简单好用、免费开源，支持 Vue2 和 Vue3
那些免费的砖
03-23 1002
用户头像上传需要裁剪和压缩图片，这个 Vue 插件就能快速完成这样的开发需求。
Vue2 vue-cropper裁剪图片-使用方法及注意事项
MyOxygen的博客
06-06 2155
记录vue-cropper的使用及过程中遇到的问题
vue2中使用vue-cropper实现图剪裁效果
m0_46796399的博客
04-10 533
vue2通过vue-cropper实现图片剪裁
Vue2基于cropperjs实现用户选择图片进行上传时对图片进行自定义裁剪
叽叽歪歪的编程小白的博客
06-05 232
裁剪<el-button type="primary" @click="sureSava">裁剪</el-button></div>
在vue中使用vue-cropper实现图片裁剪上传功能
weixin_52921391的博客
01-31 1850
在vue中使用vue-cropper
vue-core-image-upload：用于裁剪和上传图像的vue插件
02-06
用于图像上传和裁剪的vue插件（支持 :mobile_phone: IE10 +） 如果使用vue.js（<= 2.0），则应转到。或选择1.xx版本。 安装 npm i vue-core-image-upload --save 代码示例（ES6） < vue-core-image-upload ...
vue项目中使用vue-layer弹框插件的方法
10-15
主要介绍了vue项目中使用vue-layer弹框插件的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！...注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
【vue2+elementUI】图片上传和上传前尺校验和裁剪功能的实现
js_wwj的博客
10-09 5329
vue+elementui的可裁剪上传图片和直接上传，包含前端对图片尺寸的校验
vue中上传图片并裁剪
qq_51538602的博客
08-30 1685
先安装 引用上传按钮 弹出的裁剪框 是参照这位博主的改进的 仅作为本人的学习积累笔记 如有侵权 私信我删除谢谢vue+element实现图片上传及裁剪功能（vue-cropper）_努力搬砖的阿一的博客-CSDN博客_element 图片裁切...
Vue项目中使用图片裁切器 cropperjs (头像裁切)
zep
06-28 2506
cropperjs官方文档 cropperjs结合element-ui 组件后的显示效果: 1. npm 安装 cropperjs cmd命令行输入：npm install cropperjs --save 2. 导入相关js和css文件 import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' 3. 用块元素（容器）包裹图像或画布元素 4. 设置样式，确保图像的大小完全铺满容器 5. 初始化裁切器 <te.
vue实现图片裁剪后上传
halo1416的博客
12-14 2466
一、背景 目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁剪，并且按要求只能裁剪为1:1，然后在进行上传。 当然，为了兼容系统其它地方有5:4或者16:9的图片比例需求，需要给出一个参数，可以随时控制图片裁剪的比例。 二、使用什么插件实现 使用vue-cropper显示，该插件是基于cropper的二次封装，简单小巧，更合适vue项目。注意：功能...
vue 压缩图片不失真
06-10
在 Vue 中，可以使用 `canvas` 元素来压缩图片，从而实现不失真的效果。具体操作步骤如下： 1. 使用 `new Image()` 创建一个图片对象，设置其 `src` 为需要压缩的图片地址。 2. 在图片加载完成后，使用 `canvas` 元素将图片绘制到画布上。 3. 设置画布的宽高和绘制的图片宽高比一致，使用 `toDataURL()` 方法将画布上的图片数据转化为 Base64 编码的字符串。 4. 将 Base64 编码的字符串传递给后端进行上传或存储。 以下是示例代码： ```html <template> <input type="file" @change="compressImage"> </template> <script> export default { methods: { compressImage(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); // 转换为 Base64 编码 reader.onload = (event) => { const img = new Image(); img.src = event.target.result; img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); const dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片质量，可调整压缩比例 console.log(dataUrl); // 输出 Base64 编码的字符串，可传递给后端进行上传或存储 }; }; } } } </script> ``` 需要注意的是，压缩图片质量的时候，压缩比例越大，图片压缩后的大小越小，但是图片质量也会越来越差。因此需要根据实际需求选择合适的压缩比例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值