vue3 vue-cropper裁剪图片并上传

于 2024-05-31 17:07:14 发布
阅读量1k 收藏 13
点赞数 27
分类专栏： 日常小需求 文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53816329/article/details/139357269
版权

vue3 利用vue-cropper裁剪图片并上传

1、安装vue-cropper

npm install vue-cropper

2、引入vue-cropper

import { VueCropper } from "vue-cropper";

3、使用vue-cropper

3.1 该实例将vue-cropper插件和element-ui的el-upload组件结合使用，实现裁剪图片上传
      <VueCropper
        v-show="imgUrl !== ''" // 判断是否显示剪裁box
        ref="cropper"
        v-loading="loading" // loading效果
        :img="imgUrl" // 剪裁图片url
        :output-size="1" // 裁剪生成图片的质量
        output-type="png" // 裁剪生成图片的格式
        :auto-crop-width="120" // 默认生成截图框宽度
        :auto-crop-height="120" // 默认生成截图框高度
        :auto-crop="true" // 是否默认生成截图框
        :can-move="false" // 上传图片是否可以移动
        :centerBox="true" // 截图框是否被限制在图片里面
        :fixed="false" // 是否开启截图框宽高固定比例
        :fixedNumber="[1, 1]" // 截图框的宽高比例 生效前提--fixed为true
        :can-scale="false" // 图片是否允许滚轮缩放
        :full="true" // 是否输出原图比例的截图
        style="width: 240px; height: 240px" // 剪裁区域展示图片本身的宽高
        class="animate__animated animate__fadeIn" // 给组件的动画效果
        @realTime="onRealTime" // 实时预览事件
      />
3.2 预览图片区域（实时预览）
<div class="modify-avatar__cropper__preview">
        <div class="all">
          <div
            v-show="previews['url']"
            style="
              width: 80px;
              height: 80px;
              overflow: hidden;
              border-radius: 6px;
            "
          >
            <div :style="cropperBox">
              <img :src="previews['url']" :style="previews['img']" />
            </div>
          </div>
          <div v-show="!previews['url']" />
        </div>
        <p>图片预览</p>
      </div>
3.3 页面预览

avatar

「重新上传」即再次调用上传图片方法

4、基于el-upload组件二次封装的上传裁剪图片组件code（可根据具体需求进行改动）

<template>
  <el-dialog
    :model-value="dialogVisibleShow"
    title="修改图片"
    width="408px"
    center
    :before-close="handleClose"
    align-center
  >
    <div class="modify-avatar__cropper">
      <el-upload
        v-show="imgUrl === ''"
        v-loading="loading"
        class="upload-demo"
        drag
        :action="上传图片接口地址"
        :headers="{ Authorization: token }"
        multiple
        :show-file-list="false"
        :before-upload="onBeforeUpload"
        :on-success="onSuccessUpload"
      >
        <img
          class="modify-avatar__icon"
          src="上传图片前裁剪图片区域的占位图片"
        />
        <div class="el-upload__text">
          <p>点击上传图片</p>
          支持 3MB 以内的 JPG 或 PNG 图片
        </div>
      </el-upload>
      <VueCropper
        v-show="imgUrl !== ''"
        ref="cropper"
        v-loading="loading"
        :img="imgUrl"
        :output-size="1"
        output-type="png"
        :auto-crop-width="120"
        :auto-crop-height="120"
        :auto-crop="true"
        :can-move="false"
        :centerBox="true"
        :fixed="false"
        :fixedNumber="[1, 1]"
        :can-scale="false"
        :full="true"
        style="width: 240px; height: 240px"
        class="animate__animated animate__fadeIn"
        @realTime="onRealTime"
      />
      <div class="modify-avatar__cropper__preview">
        <div class="all">
          <div
            v-show="previews['url']"
            style="
              width: 80px;
              height: 80px;
              overflow: hidden;
              border-radius: 6px;
            "
          >
            <div :style="cropperBox">
              <img :src="previews['url']" :style="previews['img']" />
            </div>
          </div>
          <div v-show="!previews['url']" />
        </div>
        <p>图片预览</p>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer_div">
        <el-upload
          v-if="imgUrl !== ''"
          class="upload-demo__reUpload"
          :action="上传图片接口地址"
          :headers="{ Authorization: token }"
          multiple
          :show-file-list="false"
          :before-upload="onBeforeUpload"
          :on-success="onSuccessUpload"
          >重新上传</el-upload
        >
        <div v-else />
        <div class="modify-avatar__foot">
          <div class="common-follow" @click="handleClose">取 消</div>
          <div
            :class="[
              imgUrl === '' ? 'filed-upload' : 'complete-upload common-button'
            ]"
            @click="onSuccess"
          >
            确 定
          </div>
        </div>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import "vue-cropper/dist/index.css"; // 引入vue-cropper的样式
import { VueCropper } from "vue-cropper";
import { getToken } from "@/utils/auth";
import axios from "axios";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "ModifyAvatar",
  components: {
    VueCropper
  },
  props: {
    dialogVisibleShow: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const fileUrl = ''; // 图片地址前缀
    const imgWidth = ref(null);
    const imgHeight = ref(null);
    const cropperWidth = ref(null);
    const cropperHeight = ref(null);
    const previewStyle = reactive({ value: {} });
    const previews = ref({});
    const cropperBox = ref("");
    const imgUrl = ref("");
    const loading = ref(false);
    onMounted(() => {});
    return {
      imgWidth, // 图片宽度
      imgHeight, // 图片高度
      cropperWidth, // 裁剪框宽度
      cropperHeight, // 裁剪框高度
      previewStyle, // 预览样式
      previews, // 裁剪图片属性
      loading, // 上传loading
      cropperBox, // 裁剪框样式
      imgUrl, // 上传完图片链接
      fileUrl
    };
  },
  methods: {
    handleClose() {
      this.$emit("onClose");
    },
    // 图片上传之前
    onBeforeUpload(file) {
      const imgType: any = ["png", "jpg", "jpeg"];
      if (
        !imgType.find(item => {
          return file.type.includes(item);
        })
      ) {
        ElMessage.error("仅支持png，jpg格式");
        return false;
      } else if (file.size / 1024 / 1024 > 3) {
        ElMessage.error("单个图片不超过 3MB!");
        return false;
      }
      this.loading = true;
      const blob = new Blob([file], { type: "image/png" });
      this.imgUrl = window.URL.createObjectURL(blob);

      // 获取上传图片宽高
      const reader = new FileReader();
      reader.onload = event => {
        const txt = event.target.result;
        const img = document.createElement("img");
        img.src = txt;
        img.onload = () => {
          // 设置截取框背景图片宽高
          if (img.width >= img.height) {
            this.imgWidth = 240;
            this.imgHeight = (240 * img.height) / img.width;
          } else {
            this.imgHeight = 240;
            this.imgWidth = (240 * img.width) / img.height;
          }
        };
      };
      reader.readAsDataURL(file);
      return true;
    },
    // 图片上传成功
    onSuccessUpload() {
      this.loading = false;
    },
    // 确认上传图片
    onSuccess() {
      if (this.imgUrl) {
        this.$refs.cropper.getCropBlob(data => {
          const formData = new FormData();
          formData.append("file", data, "avatar.png"); //添加图片信息的参数
          axios({
            method: "post",
            headers: {
              Authorization: token
            },
            url: `上传图片接口地址`,
            data: formData
          })
            .then(data => {
              if (data.data.resp_code === 0) {
                this.imgUrl = data.data.datas;
                this.$emit("onSuccessAvatar", this.imgUrl);
              }
            })
            .catch(() => {
              this.$message.warning("网络似乎不通畅，请检查后再试");
            });
        });
      }
    },
    // 实时裁剪
    onRealTime(data) {
      const previews = data;
      this.cropperWidth = previews.w;
      this.cropperHeight = previews.h;
      this.previewStyle1 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0"
      };
      // 获取截取框的偏移量
      const cropperImg = document.getElementsByClassName("cropper-crop-box")[0];
      const transformX = cropperImg["style"].transform
        .split("(")[1]
        .split(",")[0]
        .split("px")[0];
      const transformY = cropperImg["style"].transform
        .split("(")[1]
        .split(",")[1]
        .split("px")[0];
      // 设置预览框背景图宽高
      data.img.width = (this.imgWidth * 80) / data.w + "px";
      data.img.height = (this.imgHeight * 80) / data.h + "px";
      this.cropperBox = `width: ${
        (240 * data.img.width.split("px")[0]) / this.imgWidth
      }px;height: ${
        (240 * data.img.height.split("px")[0]) / this.imgHeight
      }px;display:flex;align-items: center;justify-content: center;`;
      // 计算偏移量
      const previewWidth = (240 * 80) / data.w;
      const previewHeight = (240 * 80) / data.h;
      const X = (transformX * previewWidth) / 240;
      const Y = (transformY * previewHeight) / 240;
      data.img.transform = `translateX(-${X}px) translateY(-${Y}px)`;
      this.$nextTick(() => {
        this.previews = data;
      });
    }
  }
});
</script>
<style lang="scss">
.el-dialog {
  border-radius: 8px;

  .el-dialog__header {
    text-align: left;
  }

  .el-dialog__title {
    color: #1c232f;
    font-weight: 600;
    font-size: 18px;
  }
  .el-upload {
    border: none;
    background: #fff;
  }
}

.modify-avatar__cropper {
  display: flex;

  .el-upload {
    width: 240px;
    height: 240px;

    .el-upload-dragger {
      width: 100%;
      height: 100%;
      background: #f4f5f7;
      border: 1px solid transparent;
    }
  }
}

.upload-demo__reUpload {
  color: #143f98;

  .el-upload--picture-card:hover,
  .el-upload:focus {
    color: #143f98;
  }

  .el-upload {
    width: 56px;
    height: 22px;
  }

  .el-upload--picture-card:hover,
  .el-upload {
    color: #143f98;
  }
}

.el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}

.vue-cropper {
  width: 480px;
  height: auto;
}

.el-upload__text {
  font-size: 12px !important;
  color: #5e6982;
  margin-top: 24px;

  p {
    font-size: 14px;
    color: #143f98;
  }
}

.dialog-footer_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}

.modify-avatar__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.modify-avatar__reUpload {
  color: #143f98;
  cursor: pointer;
}

.modify-avatar__foot {
  display: flex;
  cursor: pointer;

  div {
    width: 64px;
    height: 32px;
    background: #f3f4f7;
    border-radius: 4px;
  }

  div:nth-of-type(1) {
    color: #5b6985;
    margin-right: 8px;
  }
  .complete-upload {
    background: #143f98;
    color: #ffffff;
  }

  .filed-upload {
    background: #94bfff;
    color: #ffffff;
    cursor: not-allowed;
  }
  .common-follow {
    margin-left: 24px;
  }
}

.modify-avatar__cropper__preview {
  margin-left: 24px;
  .all {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    background: #fff;
  }
  img {
    width: 80px;
    height: 36px;
    background: #f4f5f7;
    object-fit: contain;
  }

  div {
    width: 80px;
    height: 80px;
    background: #f4f5f7;
  }

  p {
    font-size: 14px;
    color: #5b6985;
    text-align: center;
    margin-top: 8px;
  }
}
</style>

补充

vue-cropper插件常用相关属性和方法

属性
名称功能默认值可选值
img裁剪图片的地址空url 地址, base64, blob
outputSize裁剪生成图片的质量10.1 ~ 1
outputType裁剪生成图片的格式jpg (jpg 需要传入jpeg)jpeg, png, webp
info裁剪框的大小信息truetrue, false
fixed是否开启截图框宽高固定比例falsetrue, false
fixedNumber截图框的宽高比例, 开启fixed生效[1, 1][ 宽度 , 高度 ]
…………
可用回调方法
方法名功能
realTime实时预览事件
imgMoving图片移动回调函数
cropMoving截图框移动回调函数
imgLoad图片加载的回调, 返回结果 success, error
内置方法和属性
属性说明
this.$refs.cropper.cropW截图框宽度
this.$refs.cropper.cropH截图框高度

具体方法和属性请查看插件官网
https://www.npmjs.com/package/vue-cropper

进阶版橘子汽水
关注
  • 27
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue3+elementPlus+vueCropper实现头像(图片)裁剪（非常全，可直接cv！！！！！）
qq_52850749的博客
02-01 988
最后一步就是确认裁剪操作了,这一步一定要用asyncawait,不然数据获取的会有问题，会显示promisepending，调上传接口的时候也要把headers带上，点击确认裁剪的时候我加了一个elemnetplus的loading动画，防止没上传完弹出就被用户x掉了。总结：首先使用el-upload拿到图片地址，将图片url转换成base64，使用头像裁剪，最后调用upload上传接口，成功后调用保存图片即可。完结，撒花，以上代码有任何问题请私信踢我，或者评论区留言！引入vueCropper插件。
图片裁剪：在vue3中使用vue-cropper
weixin_44074543的博客
12-08 2044
图片裁剪：在vue3+TS中使用vue-cropper。
Vue3 图片裁剪插件 vue-cropper
XLucas
08-28 551
Vue 3 图片裁剪插件 vue-cropper setup 语法糖模式用法
在Vue3中使用图片裁剪vue-cropper
最新发布
weixin_45653441的博客
05-23 229
【代码】在Vue3中使用图片裁剪vue-cropper。
vue3实现图片裁剪上传功能
Joy_qxz的博客
10-26 768
【代码】vue3实现图片裁剪上传功能。
vue3+vue-cropper图片裁剪个人使用记录
m0_62317155的博客
07-13 8266
这是本人在使用vue-cropper裁剪图片时的过程，这里大概记录一下
vue3+element-plus+vue-cropper实现裁剪图片上传
qq_40591925的博客
12-01 1540
vue3+element-plus+vue-cropper实现裁剪图片上传 裁剪图片上传 vue-cropper element-plus vue3
web技术分享| 图片上传与图片裁剪结合 vue3
anyRTC的博客
12-07 1018
上传的图片限制长宽相同；只能上传图片；图片大小限制 500k当前项目仅需要上传的图片信息 上传： Upload 上传(element plus 组件) 实现理论： 通过组件 Upload 进行图片上传前校验方法判断是否需要裁剪、是否是图片、是否超过大小限制； 裁剪后的图片限制大小； 上传的图片信息暴漏出组件； 组件调用 img-url 默认预览的图片 @img-upload 上传所需的最终图片裁剪时弹窗显示 逻辑 图片相关方法封装
使用vue3实现一个图片裁剪的功能
jsmeng626的博客
04-07 1018
使用vue3实现一个图片裁剪的功能
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
:girl: 一个简单而优雅的头像裁剪和上传插件。 正在安装 $ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " ...
Vue3 使用vue-cropper裁剪 填坑
u010219889的博客
01-29 1481
最近项目中用到了图片裁剪，走了一点弯路，记录一下。
vue3+ts实现图片裁剪上传（像素裁剪，比例裁剪）、视频上传
_小郑有点困了的博客
03-20 687
产品说想要一个图片上传的功能，并且控制图片比例为16：9，所以就需要用到图片裁剪。
vue 图片裁剪并回传显示
weixin_44021888的博客
12-01 978
vue 图片裁剪并回传显示
【vue3图片裁剪】上传、裁剪、压缩图片尺寸
qq_32768761的博客
05-06 1044
【vue3图片裁剪】【代码】上传、裁剪、压缩图片尺寸。
vue3使用vue-cropper
09-09
要在Vue 3中使用vue-cropper，首先你需要安装vue-cropper插件。你可以使用npm命令来安装它，具体的命令是： ``` npm install vue-cropper@next ``` 安装完成后，在你的Vue组件中引入vue-cropper的相关代码。你可以在VueCropper.ts文件中找到vue-cropper的代码，并将其引入到你的组件中。具体代码如下： ```javascript import 'vue-cropper/dist/index.css' import { VueCropper } from "vue-cropper"; export default { components: { VueCropper }, // 其他组件配置 } ``` 在你的Vue模板中，你可以使用`<vue-cropper>`标签来使用vue-cropper插件。你可以根据官方文档来配置和使用vue-cropper，实现图片裁剪的功能。 需要注意的是，为了正确地使用vue-cropper插件，你还需要在项目中引入所需的样式文件。通过引入`vue-cropper/dist/index.css`，你可以确保插件的样式能够正确地加载和应用到你的组件中。 综上所述，这是在Vue 3中使用vue-cropper的基本步骤。你可以根据你的具体需求和项目配置来进一步使用和定制vue-cropper插件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值