使用Vue + ant-design + Cropper二次封装一个公共图片裁剪组件

最新推荐文章于 2024-08-23 08:36:41 发布

doit_damao

最新推荐文章于 2024-08-23 08:36:41 发布

阅读量652

点赞数

分类专栏： Vue Js 文章标签：图片裁剪 cropper.js 图片预览动态的裁剪比例

本文链接：https://blog.csdn.net/qq_42127308/article/details/107604438

版权

效果展示：（裁剪、预览、可重新选取图片、可设置动态的裁剪宽高比例、上传图片到自己的服务器）

代码实现：（cropper安装、上传图片方法请自行百度）

<template>
  <div class="cut-img-container">
    <!-- 裁剪后图片展示、预览、删除，选取裁剪图片 -->
    <div v-if="afterCutImgUrl && afterCutImgUrl !== '--'"
         class="item-img-container">
      <img :src="afterCutImgUrl"
           :preview="afterCutImgUrl"
           preview-text="展示的图片"
           class="item-img">
      <span class="delete-img"
            @click="deleteImg">删除图片</span>
    </div>
    <a-upload name="file"
              listType="picture-card"
              :action="uploadActionUrl"
              :headers="headers"
              :fileList="fileList"
              :beforeUpload="selectImage">
      <a-icon type="plus" />
      <div class="ant-upload-text">
        {
  {btnText}}
      </div>
    </a-upload>
    <!-- 裁剪区域，固定定位在浏览器右侧（重新选取裁剪图片、裁剪时预览图片、更改裁剪图片宽高比例） -->
    <transition name="cut">
      <!-- 此处用v-if不用v-show的原因是preview每次都需要重新绘制，不然尺寸会紊乱 -->
      <div class="cut-out-container"
           v-if="showCutImg"
           @click.self="clickBg($event)">
        <div class="cut-inner-container">
          <a-icon type="close"
                  class="close-btn"
                  @click="cancelCut" />
          <div class="cut-header">图片裁剪</div>
          <div class="cut-container">
            <div class="img-area-container">
              <div class="img-container"
                   ref="primaryImgRef">
                <img :src="cutImgObj.cutImgUrl"
                     ref="image"
                     alt="">
              </div>
              <div class="after-cropper">
                <div class="preview"></div>
                <span>（裁剪后预览）</span>
              </div>
            </div>
            &