AI调试136版，我做出了这款Vue图片上传裁切工具

在业务系统后台中有很多用到上传图片的地方，一直都是前端只标注各处图片上传的尺寸，运营根据尺寸做固定切图上传，有时候没注意就会上传未经压缩的图片。就想着弄一个图片上传组件能实现canvas切图，最好是跟微信公众号封面图配图上传的裁切效果差不多的，然后就陆续花了几天时间让”扣子AI“帮我使用vue实现这些功能，其实前面20版左右已经有个差不多能用的版本的，后面我又陆续增加了一些其他功能改动起来就又修改了很多版本。在细节方面有的地方还是得人工修改来得快，如果让AI修改反反复复改好几次自己直接改代码还来得快。

本来想放出中间版本的效果然后对比最终成品，但毕竟是AI帮忙完成的就直接出最终效果吧，后面也会附上源码（vue组件，适合二次改造后灵活使用）。

效果图

↓ 可以自定义图片上传数量限制，上传&预览图尺寸大小，上传后裁切尺寸，上传url地址

↓ 缩放裁切模式，会自动调整原图及裁切画布适应左侧操作区域的大小，支持鼠标滚轮缩放以及键盘方向键微调移动。最终裁切方式是计算裁切区域后直接放到到原始图片尺寸进行裁切确保图片不会失真，然后再将裁切好的图片整体缩放到目标尺寸大小以便上传或下载。

↓ 如果是带透明通道的png图片，会提供是否保留透明图层的选项，有些C端图片要有透明效果就必须保留透明通道否则到时候就有黑/白背景。另外原图裁切模式是指原始图片和目标尺寸都是1:1的相对大小，这种因为不存在图片缩放操作一般原始图比目标尺寸大的时候使可以用这个模式。当然也提供了一个上传原图的功能，如果canvas处理因浏览器兼容性有问题时可尝试使用这个功能。

↓ 如果限制只能1张图，点击上传会提示错误。

Vue图片上传裁切项目源码

App.vue

  1<template>
  2  <div class="container">
  3    <header class="header">
  4      <h1>图片上传与裁剪工具</h1>
  5      <p>
  6        上传图片，调整裁剪区域，然后保存您的完美照片
  7      </p>
  8    </header>
  9 
 10    <main class="main">
 11      <!-- 示例1: 正方形裁剪 (300x300) -->
 12      <section class="section">
 13        <h2 class="section-title">正方形图片上传 (300×300)</h2>
 14         <ImageCropUploader
 15           :cropWidth="300"
 16           :cropHeight="300"
 17 
 18           @upload-success="handleUploadSuccess"
 19           @upload-error="handleUploadError"
 20        />
 21      </section>
 22 
 23      <!-- 示例2: 矩形裁剪 (600x400) - 展示多图功能 -->
 24      <section class="section">
 25        <h2 class="section-title">矩形图片上传 (600×400) - 支持多图</h2>
 26         <ImageCropUploader
 27           :cropWidth="600"
 28           :cropHeight="400"
 29           uploadUrl="https://upload.ranjuan.cn/up.php?action=upload"
 30           :defaultImageUrl="[
 31             'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Example%20image%20with%20landscape%20orientation&sign=4d9418024b9576e730819c1417ac2760',
 32             'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Beautiful%20mountain%20landscape%20with%20trees&sign=66e6d3f53cde53c7128a5373dbed6a13'
 33           ]"
 34           :uploaderWidth="120"
 35           :uploaderHeight="120"
 36           :maxImages="3"
 37           @upload-success="handleUploadSuccess"
 38           @upload-error="handleUploadError"
 39        />
 40      </section>
 41 
 42      <!-- 示例3: 竖版裁剪 (400x1080) -->
 43      <section class="section">
 44        <h2 class="section-title">竖版图片上传 (400×1080)</h2>
 45         <ImageCropUploader
 46           :cropWidth="400"
 47           :cropHeight="1080"
 48           uploadUrl="https://upload.ranjuan.cn/up.php?action=upload"
 49           :uploaderWidth="120"
 50           :uploaderHeight="324"
 51           :maxImages="2"
 52           @upload-success="handleUploadSuccess"
 53           @upload-error="handleUploadError"
 54        />
 55      </section>
 56 
 57      <!-- 示例4: 横版裁剪 (1080x40) -->
 58      <section class="section">
 59        <h2 class="section-title">横版图片上传 (1080x40)</h2>
 60         <ImageCropUploader
 61           :cropWidth="1080"
 62           :cropHeight="40"
 63           :maxImages="1"
 64           @upload-success="handleUploadSuccess"
 65           @upload-error="handleUploadError"
 66        />
 67      </section>
 68 
 69      <!-- 上传结果展示 -->
 70      <section id="upload-result" class="section upload-result" v-if="latestImageUrl">
 71        <h2 class="section-title">最近上传结果</h2>
 72        <div class="result-content">
 73          <p class="result-label">上传成功的图片URL:</p>
 74          <code id="image-url" class="result-url">
 75            {{ latestImageUrl }}
 76          </code>
 77        </div>
 78      </section>
 79    </main>
 80 
 81    <footer class="footer">
 82      <p>© 2026 图片上传与裁剪工具</p>
 83    </footer>
 84  </div>
 85</template>
 86 
 87<script>
 88import ImageCropUploader from './components/ImageCropUploader.vue';
 89 
 90export default {
 91  name: 'App',
 92  components: {
 93    ImageCropUploader,
 94  },
 95  data() {
 96    return {
 97      latestImageUrl: null,
 98    };
 99  },
100  methods: {
101    handleUploadSuccess(url) {
102      this.latestImageUrl = url;
103      // 这里可以处理上传成功的逻辑，比如显示成功消息等
104    },
105    handleUploadError(error) {
106      console.error('上传失败:', error);
107      // 这里可以处理上传失败的逻辑，比如显示错误消息等
108    },
109  },
110};
111</script>
112 
113<style>
114/* 基础样式 */
115:root {
116  --primary-color: #3B82F6;
117  --bg-color: #f9fafb;
118  --bg-gradient: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
119  --text-color: #1f2937;
120  --text-secondary: #4b5563;
121  --border-color: #d1d5db;
122  --border-dashed: #e5e7eb;
123  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
124  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
125  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
126  --radius-lg: 0.75rem;
127  --radius-xl: 1rem;
128  --radius-full: 9999px;
129}
130 
131* {
132  margin: 0;
133  padding: 0;
134  box-sizing: border-box;
135}
136 
137body {
138  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
139  font-size: 16px;
140  line-height: 1.5;
141  color: var(--text-color);
142  background: var(--bg-gradient);
143  min-height: 100vh;
144}
145 
146/* 布局工具 */
147.container {
148  max-width: 56rem;
149  margin: 0 auto;
150  padding: 1rem 2rem;
151}
152 
153.header {
154  margin-bottom: 3rem;
155  text-align: center;
156}
157 
158.header h1 {
159  font-size: 2.5rem;
160  font-weight: 700;
161  margin-bottom: 1rem;
162  color: var(--text-color);
163}
164 
165.header p {
166  font-size: 1.125rem;
167  color: var(--text-secondary);
168}
169 
170.main {
171  display: grid;
172  gap: 2rem;
173}
174 
175.section {
176  background: white;
177  border-radius: var(--radius-xl);
178  box-shadow: var(--shadow-lg);
179  padding: 1.5rem;
180}
181 
182.section-title {
183  font-size: 1.25rem;
184  font-weight: 600;
185  margin-bottom: 1rem;
186}
187 
188.footer {
189  margin-top: 3rem;
190  text-align: center;
191  color: var(--text-secondary);
192  padding: 1rem 0;
193}
194 
195/* 上传结果展示 */
196.upload-result {
197  display: block;
198}
199 
200.result-content {
201  padding: 1rem;
202  border: 1px solid var(--border-color);
203  border-radius: var(--radius-lg);
204}
205 
206.result-label {
207  color: var(--text-secondary);
208  margin-bottom: 0.5rem;
209}
210 
211.result-url {
212  display: block;
213  background-color: #f3f4f6;
214  padding: 0.75rem;
215  border-radius: var(--radius-lg);
216  font-size: 0.875rem;
217  font-family: monospace;
218  overflow-x: auto;
219}
220</style>

./components/ImageCropUploader.vue

   1<template>
   2  <div class="image-crop-uploader">
   3    <!-- 隐藏的文件输入 -->
   4  <input
   5    type="file"
   6    ref="fileInput"
   7    accept="image/*"
   8    class="image-input"
   9    @change="handleFileSelect"
  10  />
  11  <!-- 隐藏的文件输入 - 用于模态框内更换图片 -->
  12  <input
  13    type="file"
  14    ref="modalFileInput"
  15    accept="image/*"
  16    class="image-input"
  17    @change="handleModalFileSelect"
  18  />
  19    
  20    <!-- 图片网格布局：缩略图+上传区域 -->
  21    <div class="images-grid">
  22      <!-- 循环显示已上传或默认的图片 -->
  23      <div 
  24        v-for="(imageUrl, index) in thumbnailUrls" 
  25        :key="index" 
  26        class="image-item"
  27        :style="{ width: uploaderWidth + 'px', height: uploaderHeight + 'px' }"
  28      >
  29         <div class="thumbnail-container relative h-full w-full overflow-hidden group">
  30          <img 
  31            :src="imageUrl" 
  32            :alt="`预览图 ${index + 1}`" 
  33            class="thumbnail-image" 
  34            @click="viewLargeImage(imageUrl)" 
  35          />
  36          <!-- 图片操作区域 - 固定在缩略图底部 -->
  37          <div class="operation-div" >
  38            <!-- 左侧：更换图片 -->
  39            <div 
  40              @click.stop="openReplaceImage(index)" 
  41              class="flex-1 flex justify-center items-center cursor-pointer operation-btn h-full text-xs"
  42            >
  43              <i class="fa-solid fa-arrows-rotate mr-1"></i>
  44            </div>
  45            <!-- 分割线 -->
  46            <div class="w-[1px] h-4 bg-white bg-opacity-30" style="width:20%;"></div>
  47            <!-- 右侧：删除图片 -->
  48            <div 
  49              @click.stop="deleteImage(index)" 
  50              class="flex-1 flex justify-center items-center cursor-pointer operation-btn h-full text-xs" 
  51            >
  52              <i class="fa-solid fa-trash mr-1"></i>
  53            </div>
  54          </div>
  55        </div>
  56      </div>
  57      
  58      <!-- 上传区域 - 始终在缩略图列表的右侧 -->
  59      <div 
  60        class="upload-item"
  61        :style="{ width: uploaderWidth + 'px', height: uploaderHeight + 'px' }"
  62      >
  63          <div class="upload-area h-full w-full" @click="openAddImage">
  64          <div class="upload-icon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></div>
  65          <p class="upload-size-info">{{ cropWidth }} × {{ cropHeight }}</p>
  66          <p class="upload-text">点击上传</p>
  67        </div>
  68      </div>
  69    </div>
  70 
  71    <!-- 上传结果展示 - 显示最新上传的图片URL -->
  72    <div v-if="latestImageUrl" class="upload-result mt-4">
  73      <div class="result-content">
  74        <p class="result-label">上传成功的图片URL:</p>
  75        <code class="result-url" :title="latestImageUrl">{{ latestImageUrl }}</code>
  76      </div>
  77    </div>
  78    
  79    <!-- 裁剪模态弹窗 -->
  80    <div
  81      id="crop-modal"
  82      class="modal"
  83      v-if="isModalOpen"
  84    >
  85      <div class="modal-content">
  86        <!-- 模态框头部 -->
  87        <div class="modal-header">
  88          <h2>图片处理
  89            <span v-if="imageDimensions.width > 0" class="original-size">
  90              原图尺寸: {{ imageDimensions.width }} x {{ imageDimensions.height }}
  91            </span>
  92          </h2>
  93      <el-button 
  94        type="text" 
  95        @click="hideModal"
  96        circle
  97      >
  98        <i class="fa-solid fa-times"></i>
  99      </el-button>
 100        </div>
 101 
 102        <!-- 模态框内容 -->
 103        <div class="modal-body">
 104          <!-- 左侧：原图与裁剪框 -->
 105          <div id="image-container" class="image-container">
 106            <div
 107              id="operation-area"
 108              class="operation-area"
 109              @mousedown="handleMouseDown"
 110              @mouseenter="handleMouseEnter"
 111              @mouseleave="handleMouseLeave"
 112              @wheel.prevent="handleWheel"
 113            >
 114              <!-- 显示图片 -->
 115              <img
 116                id="preview-image"
 117                :src="selectedImageSrc"
 118                alt="预览"
 119                class="preview-image"
 120                :style="imageStyle"
 121              />
 122              
 123              <!-- 裁剪框指示 - 居中显示 -->
 124              <div
 125                id="crop-box"
 126                class="crop-box"
 127                :style="{
 128                  width: cropBoxDisplayWidth + 'px',
 129                  height: cropBoxDisplayHeight + 'px',
 130                }"
 131              ></div>
 132            </div>
 133          </div>
 134 
 135          <!-- 右侧：预览区域 -->
 136          <div class="preview-section">
 137            <div class="preview-header">
 138                <!-- 下载保存图片-->
 139            
 140               <h3 class="preview-title">预览</h3>
 141               <span class="preview-size">尺寸: {{ cropWidth }} x {{ cropHeight }}</span>
 142               <el-button    @click="handleSaveCroppedImage" size="small"  >
 143               <i class="fa-solid fa-download mr-1"></i>下载 
 144            </el-button>
 145            </div>
 146            
 147            <!-- 保留透明图层选项 - 仅当图片有透明通道时显示 -->
 148            <div v-if="hasAlphaChannel" class="transparency-option-container">
 149               <el-checkbox 
 150                 v-model="preserveTransparency" 
 151                 @change="drawPreview"
 152                 class="transparency-option"
 153               >
 154                 保留透明图层
 155               </el-checkbox>
 156            </div>
 157            
 158            <div class="preview-wrapper">
 159              <canvas
 160                ref="previewCanvas"
 161                class="preview-canvas"
 162                :width="cropWidth"
 163                :height="cropHeight"
 164              ></canvas>
 165            </div>
 166            
 167             
 168            <!-- 显示黑边提示 -->
 169            <div v-if="hasBlackBorder" class="bg-amber-50 border-l-4 border-amber-500 p-3 rounded text-sm text-amber-700 w-full mt-2">
 170              ⚠️ 提示：裁剪图片存在黑边。您可以缩放或调整图片位置以填满裁剪框。
 171            </div>
 172 
 173          </div>
 174        </div>
 175 
 176        <!-- 底部控制栏 -->
 177        <div class="modal-footer">
 178          <div class="control-group">
 179            <!-- 裁切模式选择 -->
 180            <el-radio-group v-model="cropMode" class="mr-4">
 181              <el-radio-button label="scale">缩放裁切</el-radio-button>
 182              <el-radio-button label="original">原图裁切</el-radio-button>
 183            </el-radio-group>
 184            
 185            <!-- 缩放按钮 - 在原图裁切模式下禁用 -->
 186            <el-divider direction="vertical" class="mx-2" />
 187              <el-button 
 188                @click="handleZoom('out')"
 189                :disabled="cropMode === 'original'"
 190                circle
 191                size="small"
 192                title="缩小"
 193              >
 194                <i class="fa-solid fa-search-minus"></i>
 195              </el-button>
 196              <el-button 
 197                @click="handleZoom('in')"
 198                :disabled="cropMode === 'original'"
 199                circle
 200                size="small"
 201                title="放大"
 202              >
 203                <i class="fa-solid fa-search-plus"></i>
 204              </el-button>
 205            
 206            <!-- 旋转按钮 -->
 207            <el-divider direction="vertical" class="mx-2" />
 208              <el-button 
 209                @click="handleRotate(-90)"
 210                circle
 211                size="small"
 212                title="逆时针旋转"
 213              >
 214                <i class="fa-solid fa-rotate-left"></i>
 215              </el-button>
 216               <el-button 
 217                @click="handleRotate(90)"
 218                circle
 219                size="small"
 220                title="顺时针旋转"
 221              >
 222                <i class="fa-solid fa-rotate-right"></i>
 223              </el-button>
 224              
 225              <!-- 新增：更换图片按钮 -->
 226              <el-divider direction="vertical" class="mx-2" />
 227              <el-button 
 228                @click="openReplaceImageInModal"
 229                circle
 230                size="small"
 231                title="更换图片"
 232              >
 233                <i class="fa-solid fa-image"></i>
 234              </el-button>
 235          </div>
 236          
 237          <div class="action-group">
 238            <el-button @click="hideModal">
 239              取消
 240            </el-button>
 241            <el-button type="primary" plain @click="handleUploadOriginal">
 242              上传原图
 243            </el-button>
 244            <el-button type="primary" @click="handleConfirmCrop">
 245              确认上传
 246            </el-button>
 247          </div>
 248        </div>
 249      </div>
 250    </div>
 251    
 252    <!-- 大图预览浮窗 -->
 253    <div v-if="isLargeImageOpen" class="large-image-overlay" @click="closeLargeImage">
 254      <div class="large-image-container" @click.stop>
 255        <button class="large-image-close" @click="closeLargeImage">
 256          <i class="fa-solid fa-times"></i>
 257        </button>
 258        <img :src="currentLargeImage" alt="大图预览" class="large-image" />
 259      </div>
 260    </div>
 261 
 262    <!-- 通知提示 -->
 263    <div id="toast" class="toast" :class="toastClass" :style="toastStyle">
 264      {{ toastMessage }}
 265    </div>
 266  </div>
 267</template>
 268 
 269<script>
 270export default {
 271  name: 'ImageCropUploader',
 272  components: {},
 273  props: {
 274    // 预设的裁剪尺寸
 275    cropWidth: {
 276      type: Number,
 277      default: 300,
 278    },
 279    cropHeight: {
 280      type: Number,
 281      default: 300,
 282    },
 283    // 上传URL
 284    uploadUrl: {
 285      type: String,
 286      default: 'https://upload.ranjuan.cn/up.php?action=upload',
 287    },
 288    // 默认图片URL - 可以是单张或多张
 289    defaultImageUrl: {
 290      type: [String, Array],
 291      default: null
 292    },
 293    // 上传区域宽度
 294    uploaderWidth: {
 295      type: Number,
 296      default: 100
 297    },
 298      // 上传区域高度
 299      uploaderHeight: {
 300        type: Number,
 301        default: 100
 302      },
 303      // 最大图片数量限制
 304      maxImages: {
 305        type: Number,
 306        default: 1
 307      }
 308  },
 309  data() {
 310    return {
 311      // 左侧操作区域固定为600x600px
 312      OPERATION_AREA_SIZE: 600,
 313      
 314      // 状态变量
 315      isModalOpen: false,
 316      selectedImageSrc: null,
 317      latestImageUrl: null, // 只保存最新上传的图片URL
 318      thumbnailUrls: [], // 使用数组存储多张图片的URL
 319      manualScale: 1, // 手动缩放比例
 320      rotation: 0,
 321      position: { x: 0, y: 0 },
 322      isDragging: false,
 323      dragStart: { x: 0, y: 0 },
 324      imageDimensions: { width: 0, height: 0 },
 325      cropBoxScale: 1, // 矩形选框的缩放比例
 326      initialImageScale: 1, // 图片相对于操作区域的初始缩放比例
 327      originalImageData: null, // 存储原始图片数据，用于高质量裁剪
 328      
 329      // Toast 状态
 330      toastMessage: '',
 331      toastVisible: false,
 332      toastType: 'success', // 'success' 或 'error'
 333       // 用于跟踪是否存在黑色背景
 334      hasBlackBorder: false,
 335      
 336      // 缩略图相关状态
 337      isLargeImageOpen: false, // 是否显示大图预览浮窗
 338      currentLargeImage: null, // 当前正在预览的大图
 339      // 新增：裁切模式 - 默认为缩放裁切
 340      cropMode: 'scale', // 'scale' 或 'original'
 341      
 342      // 新增：控制图片操作区域焦点状态
 343      isImageAreaFocused: false,
 344      
 345      // 新增：用于存储创建的canvas实例，以便后续释放
 346      tempCanvases: [],
 347      // 当前正在被替换的图片索引
 348      replacingImageIndex: -1,
 349      // 是否有透明通道
 350      hasAlphaChannel: false,
 351      // 是否保留透明图层
 352      preserveTransparency: true
 353    };
 354  },
 355  mounted() {
 356    // 初始化默认图片
 357    this.initDefaultImages();
 358  },
 359  watch: {
 360    // 监听裁切模式变化，执行相应的重置操作
 361    cropMode(newMode) {
 362      // 无论切换到哪种模式，都完全重置所有状态
 363      this.position = { x: 0, y: 0 }; // 重置位置为居中
 364      this.manualScale = 1; // 重置手动缩放比例
 365      this.rotation = 0; // 重置旋转角度
 366      
 367      if (this.imageDimensions.width > 0 && this.imageDimensions.height > 0) {
 368        if (newMode === 'original') {
 369          // 原图裁切模式下，计算最小缩放倍率
 370          const minScale = Math.min(
 371            this.OPERATION_AREA_SIZE / this.imageDimensions.width,
 372            this.OPERATION_AREA_SIZE / this.imageDimensions.height,
 373            this.OPERATION_AREA_SIZE / this.cropWidth,
 374            this.OPERATION_AREA_SIZE / this.cropHeight
 375          );
 376          this.cropBoxScale = minScale;
 377          
 378          // 重新计算图片相对于操作区域的初始缩放比例
 379          const imgRatio = this.imageDimensions.width / this.imageDimensions.height;
 380          const areaRatio = this.OPERATION_AREA_SIZE / this.OPERATION_AREA_SIZE; // 1:1
 381          
 382          let scaleY = 1;
 383          if (imgRatio > areaRatio) {
 384            // 图片更宽，按宽度缩放
 385            scaleY = this.OPERATION_AREA_SIZE / this.imageDimensions.width;
 386          } else {
 387            // 图片更高或正方形，按高度缩放
 388            scaleY = this.OPERATION_AREA_SIZE / this.imageDimensions.height;
 389          }
 390          this.initialImageScale = scaleY;
 391        } else if (newMode === 'scale') {
 392          // 缩放裁切模式下，重新计算裁剪框的缩放比例
 393          let scaleX = 1;
 394          if (this.cropWidth > this.cropHeight) {
 395            scaleX = this.OPERATION_AREA_SIZE / this.cropWidth;
 396          } else {
 397            scaleX = this.OPERATION_AREA_SIZE / this.cropHeight;
 398          }
 399          this.cropBoxScale = scaleX;
 400          
 401          // 重新计算图片相对于操作区域的初始缩放比例
 402          const imgRatio = this.imageDimensions.width / this.imageDimensions.height;
 403          const areaRatio = this.OPERATION_AREA_SIZE / this.OPERATION_AREA_SIZE; // 1:1
 404          
 405          let scaleY = 1;
 406          if (imgRatio > areaRatio) {
 407            // 图片更宽，按宽度缩放
 408            scaleY = this.OPERATION_AREA_SIZE / this.imageDimensions.width;
 409          } else {
 410            // 图片更高或正方形，按高度缩放
 411            scaleY = this.OPERATION_AREA_SIZE / this.imageDimensions.height;
 412          }
 413          this.initialImageScale = scaleY;
 414        }
 415      }
 416      
 417      this.drawPreview();
 418    }
 419  },
 420  computed: {
 421    // 计算裁剪框显示尺寸
 422    cropBoxDisplayWidth() {
 423      return this.cropWidth * this.cropBoxScale;
 424    },
 425    cropBoxDisplayHeight() {
 426      return this.cropHeight * this.cropBoxScale;
 427    },
 428   // 计算图片的样式
 429   imageStyle() {
 430  // 根据裁切模式计算总缩放比例
 431  const totalImageScale = this.cropMode === 'original' 
 432    ? Math.min(
 433        this.OPERATION_AREA_SIZE / this.imageDimensions.width, 
 434        this.OPERATION_AREA_SIZE / this.imageDimensions.height, 
 435        this.OPERATION_AREA_SIZE / this.cropWidth, 
 436        this.OPERATION_AREA_SIZE / this.cropHeight
 437      )
 438    : this.initialImageScale * this.manualScale;
 439  
 440  // 确保图片位置包含x和y偏移
 441  return {
 442    transform: `translate(calc(-50% + ${this.position.x}px), calc(-50% + ${this.position.y}px)) scale(${totalImageScale}) rotate(${this.rotation}deg)`,
 443    width: `${this.imageDimensions.width}px`,
 444    height: `${this.imageDimensions.height}px`,
 445    cursor: this.isDragging ? 'grabbing' : 'grab',
 446    position: 'absolute',
 447    top: '50%',
 448    left: '50%',
 449    transformOrigin: 'center center',
 450    maxWidth: 'none',
 451    maxHeight: 'none'
 452  };
 453},
 454    // Toast 样式
 455    toastClass() {
 456      return {
 457        'toast-success': this.toastType === 'success',
 458        'toast-error': this.toastType === 'error',
 459      };
 460    },
 461    toastStyle() {
 462      return {
 463        transform: this.toastVisible ? 'translateY(0)' : 'translateY(-20px)',
 464        opacity: this.toastVisible ? '1' : '0',
 465      };
 466    },
 467  },
 468  methods: {
 469    // 初始化默认图片
 470    initDefaultImages() {
 471      if (typeof this.defaultImageUrl === 'string' && this.defaultImageUrl) {
 472        // 如果是单个URL，添加到数组中
 473        this.thumbnailUrls = [this.defaultImageUrl];
 474      } else if (Array.isArray(this.defaultImageUrl) && this.defaultImageUrl.length > 0) {
 475        // 如果已经是数组，直接使用
 476        this.thumbnailUrls = [...this.defaultImageUrl];
 477      } else {
 478        // 否则保持空数组
 479        this.thumbnailUrls = [];
 480      }
 481    },
 482    
 483    // 检测图片是否包含透明通道
 484    async detectAlphaChannel(imageSrc) {
 485      return new Promise((resolve) => {
 486        // 仅对PNG格式进行检测
 487        if (!imageSrc.toLowerCase().includes('image/png')) {
 488          resolve(false);
 489          return;
 490        }
 491        
 492        const img = new Image();
 493        img.crossOrigin = 'anonymous';
 494        img.src = imageSrc;
 495        
 496        img.onload = () => {
 497          const canvas = document.createElement('canvas');
 498          const ctx = canvas.getContext('2d');
 499          
 500          if (!ctx) {
 501            resolve(false);
 502            return;
 503          }
 504          
 505          // 设置canvas尺寸
 506          canvas.width = img.width > 50 ? 50 : img.width; // 缩小图片以提高检测速度
 507          canvas.height = img.height > 50 ? 50 : img.height;
 508          
 509          // 绘制图片
 510          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 511          
 512          // 获取图片数据
 513          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 514          const data = imageData.data;
 515          
 516          // 检查是否有透明度
 517          for (let i = 3; i < data.length; i += 4) {
 518            if (data[i] < 255) { // 如果alpha通道值小于255，说明有透明度
 519              resolve(true);
 520              return;
 521            }
 522          }
 523          
 524          resolve(false);
 525        };
 526        
 527        img.onerror = () => {
 528          resolve(false);
 529        };
 530      });
 531    },
 532    
 533    // 在模态框中打开文件选择器更换图片
 534    openReplaceImageInModal() {
 535      if (this.$refs.modalFileInput) {
 536        this.$refs.modalFileInput.click();
 537      }
 538    },
 539    
 540    // 处理模态框中的文件选择
 541    handleModalFileSelect(event) {
 542      const file = event.target.files[0];
 543      if (file) {
 544        if (!file.type.startsWith('image/')) {
 545          this.showToast('请选择有效的图片文件', 'error');
 546          return;
 547        }
 548        
 549      const reader = new FileReader();
 550      reader.onload = e => {
 551        // 先检测图片是否有透明通道
 552        this.detectAlphaChannel(e.target.result).then(hasAlpha => {
 553          this.hasAlphaChannel = hasAlpha;
 554          this.preserveTransparency = hasAlpha; // 如果有透明通道，默认保留
 555          // 重置所有状态，使用新图片
 556          this.resetCropState(e.target.result);
 557        });
 558      };
 559      reader.readAsDataURL(file);
 560    }
 561    
 562    // 重置input，以便可以重复选择同一个文件
 563      if (this.$refs.modalFileInput) {
 564        this.$refs.modalFileInput.value = '';
 565      }
 566    },
 567    
 568    // 重置裁切状态，使用新图片
 569    resetCropState(imageSrc) {
 570      this.selectedImageSrc = imageSrc;
 571      
 572      // 重置状态
 573      this.manualScale = 1; // 手动调整倍率
 574      this.rotation = 0;
 575      this.position = { x: 0, y: 0 }; // 初始位置居中
 576      this.hasBlackBorder = false;
 577      this.cropMode = 'scale'; // 重置为默认的缩放裁切模式
 578      
 579      // 加载图片并设置初始尺寸
 580      const img = new Image();
 581      img.src = imageSrc;
 582      
 583      // 保存this引用，以便在回调中使用
 584      const self = this;
 585      
 586      img.onload = function() {
 587        self.imageDimensions = { width: img.width, height: img.height };
 588        
 589        // 保存原始图片数据用于高质量裁剪
 590        const originalImg = new Image();
 591        originalImg.src = self.selectedImageSrc;
 592        originalImg.onload = function() {
 593          self.originalImageData = originalImg;
 594          
 595          // 计算矩形选框的缩放比例
 596          if (self.cropMode === 'original') {
 597            // 原图裁切模式下，计算最小缩放倍率
 598            const minScale = Math.min(
 599              self.OPERATION_AREA_SIZE / img.width,
 600              self.OPERATION_AREA_SIZE / img.height,
 601              self.OPERATION_AREA_SIZE / self.cropWidth,
 602              self.OPERATION_AREA_SIZE / self.cropHeight
 603            );
 604            self.cropBoxScale = minScale;
 605          } else {
 606            // 缩放裁切模式下的原有逻辑
 607            let scaleX = 1;
 608            if (self.cropWidth > self.cropHeight) {
 609              // 宽度更长，适配宽度
 610              scaleX = self.OPERATION_AREA_SIZE / self.cropWidth;
 611            } else {
 612              // 高度更长，适配高度
 613              scaleX = self.OPERATION_AREA_SIZE / self.cropHeight;
 614            }
 615            self.cropBoxScale = scaleX;
 616          }
 617          
 618          // 计算图片相对于操作区域的初始缩放比例
 619          const imgRatio = img.width / img.height;
 620          const areaRatio = self.OPERATION_AREA_SIZE / self.OPERATION_AREA_SIZE; // 1:1
 621          
 622          let scaleY = 1;
 623          if (imgRatio > areaRatio) {
 624            // 图片更宽，按宽度缩放
 625            scaleY = self.OPERATION_AREA_SIZE / img.width;
 626          } else {
 627            // 图片更高或正方形，按高度缩放
 628            scaleY = self.OPERATION_AREA_SIZE / img.height;
 629          }
 630          self.initialImageScale = scaleY;
 631          
 632          // 绘制预览
 633          self.drawPreview();
 634        };
 635      };
 636      
 637      // 显示成功提示
 638      this.showToast('图片已更换');
 639    },
 640    
 641    // 显示通知提示
 642    showToast(message, type = 'success') {
 643      this.toastMessage = message;
 644      this.toastType = type;
 645      this.toastVisible = true;
 646      
 647      setTimeout(() => {
 648        this.toastVisible = false;
 649      }, 3000);
 650    },
 651    
 652    // 计算图片旋转后的尺寸
 653    getRotatedDimensions(width, height, angle) {
 654      const rad = (angle * Math.PI) / 180;
 655      const rotatedWidth = Math.abs(width * Math.cos(rad)) + Math.abs(height * Math.sin(rad));
 656      const rotatedHeight = Math.abs(height * Math.cos(rad)) + Math.abs(width * Math.sin(rad));
 657      return { rotatedWidth, rotatedHeight };
 658    },
 659    
 660     // 绘制预览图 - 当图片不足裁剪时用黑色背景填充
 661    drawPreview() {
 662      if (!this.$refs.previewCanvas || !this.selectedImageSrc) return;
 663      
 664      const canvas = this.$refs.previewCanvas;
 665      const ctx = canvas.getContext('2d');
 666      if (!ctx) return;
 667      
 668      // 设置canvas尺寸为裁剪尺寸
 669      canvas.width = this.cropWidth;
 670      canvas.height = this.cropHeight;
 671      
 672      // 确保canvas的context设置了正确的globalCompositeOperation以保留透明度
 673      ctx.globalCompositeOperation = 'source-over';
 674      
 675      // 根据是否保留透明图层决定是否填充背景
 676      if (!this.preserveTransparency) {
 677        ctx.fillStyle = '#000000';
 678        ctx.fillRect(0, 0, canvas.width, canvas.height);
 679      } else if (this.hasAlphaChannel) {
 680        // 如果保留透明图层且图片有透明通道，清空canvas（保持透明）
 681        ctx.clearRect(0, 0, canvas.width, canvas.height);
 682      } else {
 683        // 否则仍然使用黑色背景
 684        ctx.fillStyle = '#000000';
 685        ctx.fillRect(0, 0, canvas.width, canvas.height);
 686      }
 687      
 688      // 调用与高清裁切相同的算法生成预览图
 689      this.generatePreviewWithHighQualityAlgorithm(canvas, ctx);
 690    },
 691    
 692      // 使用与高清裁切相同的算法生成预览图
 693      generatePreviewWithHighQualityAlgorithm(canvas, ctx) {
 694        if (!this.selectedImageSrc || !this.originalImageData || !canvas || !ctx) return;
 695        
 696        // 确保canvas的context设置了正确的globalCompositeOperation以保留透明度
 697        ctx.globalCompositeOperation = 'source-over';
 698        
 699        // 创建一个离屏canvas用于旋转和定位原始图片
 700        const tempCanvas = document.createElement('canvas');
 701        const tempCtx = tempCanvas.getContext('2d');
 702        if (!tempCtx) return;
 703        
 704        // 从原始图片数据创建图像对象
 705        const img = this.originalImageData;
 706        
 707        // 根据旋转角度设置临时canvas尺寸
 708        const angle = (this.rotation * Math.PI) / 180;
 709        const { rotatedWidth, rotatedHeight } = this.getRotatedDimensions(
 710          img.width, 
 711          img.height, 
 712          this.rotation
 713        );
 714        
 715        // 确保rotatedWidth和rotatedHeight为正数
 716        const safeRotatedWidth = Math.max(1, rotatedWidth);
 717        const safeRotatedHeight = Math.max(1, rotatedHeight);
 718        
 719        // 设置临时canvas尺寸
 720        tempCanvas.width = safeRotatedWidth;
 721        tempCanvas.height = safeRotatedHeight;
 722        
 723        // 确保临时canvas也正确处理透明度
 724        if (this.hasAlphaChannel) {
 725          tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
 726        }
 727        
 728        // 在临时canvas上绘制旋转后的原始图像
 729        tempCtx.save();
 730        tempCtx.translate(tempCanvas.width / 2, tempCanvas.height / 2);
 731        tempCtx.rotate(angle);
 732        
 733        // 绘制原始图片，不进行任何缩放损失
 734        tempCtx.drawImage(
 735          img,
 736          -img.width / 2,
 737          -img.height / 2,
 738          img.width,
 739          img.height
 740        );
 741        tempCtx.restore();
 742        
 743        // 根据裁切模式计算总缩放比例
 744        let totalImageScale;
 745        if (this.cropMode === 'original') {
 746          totalImageScale = Math.min(
 747            this.OPERATION_AREA_SIZE / this.imageDimensions.width, 
 748            this.OPERATION_AREA_SIZE / this.imageDimensions.height, 
 749            this.OPERATION_AREA_SIZE / this.cropWidth, 
 750            this.OPERATION_AREA_SIZE / this.cropHeight
 751          );
 752        } else {
 753          totalImageScale = this.initialImageScale * this.manualScale;
 754        }
 755        
 756        // 确保缩放比例不为0
 757        if (totalImageScale <= 0) {
 758          return;
 759        }
 760        
 761        // 计算裁剪框在操作区域中的实际尺寸
 762        const cropBoxActualWidth = this.cropWidth * this.cropBoxScale;
 763        const cropBoxActualHeight = (this.cropHeight / this.cropWidth) * cropBoxActualWidth;
 764        
 765        // 计算裁剪区域在操作区域中的相对位置
 766        const cropAreaLeftInOperation = -cropBoxActualWidth / 2;
 767        const cropAreaTopInOperation = -cropBoxActualHeight / 2;
 768        
 769        // 考虑图片移动后的偏移
 770        const adjustedLeftInOperation = cropAreaLeftInOperation - this.position.x;
 771        const adjustedTopInOperation = cropAreaTopInOperation - this.position.y;
 772        
 773        // 转换到原始图片坐标系
 774        const cropX = tempCanvas.width / 2 + adjustedLeftInOperation * 1 / totalImageScale;
 775        const cropY = tempCanvas.height / 2 + adjustedTopInOperation * 1 / totalImageScale;
 776        
 777        // 考虑缩放比例调整裁剪尺寸
 778        const cropWidthOriginal = cropBoxActualWidth * 1 / totalImageScale;
 779        const cropHeightOriginal = (this.cropHeight / this.cropWidth) * cropWidthOriginal;
 780        
 781        // 确保裁剪尺寸为正数
 782        const safeCropWidthOriginal = Math.max(1, cropWidthOriginal);
 783        const safeCropHeightOriginal = Math.max(1, cropHeightOriginal);
 784        
 785        // 计算源图像的有效区域
 786        const sourceX = Math.max(0, cropX);
 787        const sourceY = Math.max(0, cropY);
 788        const sourceWidth = Math.min(tempCanvas.width - sourceX, safeCropWidthOriginal);
 789        const sourceHeight = Math.min(tempCanvas.height - sourceY, safeCropHeightOriginal);
 790        
 791        // 确保源区域尺寸为正数
 792        const safeSourceWidth = Math.max(1, sourceWidth);
 793        const safeSourceHeight = Math.max(1, sourceHeight);
 794        
 795        // 计算目标canvas上的绘制位置和尺寸
 796        const destX = Math.max(0, -cropX) * (this.cropWidth / safeCropWidthOriginal);
 797        const destY = Math.max(0, -cropY) * (this.cropHeight / safeCropHeightOriginal);
 798        const destWidth = safeSourceWidth * (this.cropWidth / safeCropWidthOriginal);
 799        const destHeight = safeSourceHeight * (this.cropHeight / safeCropHeightOriginal);
 800        
 801        // 如果有有效的源图像区域，则绘制到高质量canvas
 802        if (safeSourceWidth > 0 && safeSourceHeight > 0 && tempCanvas.width > 0 && tempCanvas.height > 0) {
 803          // 首先绘制原始尺寸的裁剪区域到临时canvas
 804          const scaledCanvas = document.createElement('canvas');
 805          const scaledCtx = scaledCanvas.getContext('2d');
 806          if (scaledCtx) {
 807            // 设置中间canvas尺寸为原始裁剪尺寸，确保为正数
 808            scaledCanvas.width = Math.max(1, safeSourceWidth);
 809            scaledCanvas.height = Math.max(1, safeSourceHeight);
 810            
 811            // 确保中间canvas也正确处理透明度
 812            if (this.hasAlphaChannel) {
 813              scaledCtx.clearRect(0, 0, scaledCanvas.width, scaledCanvas.height);
 814            }
 815            
 816            try {
 817              // 先将原始图片区域绘制到中间canvas
 818              scaledCtx.drawImage(
 819                tempCanvas,
 820                sourceX,
 821                sourceY,
 822                safeSourceWidth,
 823                safeSourceHeight,
 824                0,
 825                0,
 826                safeSourceWidth,
 827                safeSourceHeight
 828              );
 829              
 830              // 然后将中间canvas绘制到目标canvas，并缩放到目标尺寸
 831              // 使用drawImage的完整参数形式以确保高质量缩放和透明度保留
 832              ctx.drawImage(
 833                scaledCanvas,
 834                0,
 835                0,
 836                scaledCanvas.width,
 837                scaledCanvas.height,
 838                destX,
 839                destY,
 840                destWidth,
 841                destHeight
 842              );
 843            } catch (error) {
 844              console.warn('Canvas绘制错误，但已被安全处理:', error);
 845            }
 846            // 记录创建的canvas，以便后续释放
 847            this.tempCanvases.push(scaledCanvas);
 848          }
 849        }
 850        
 851        // 检测是否存在黑色背景
 852        const hasBorder = destX > 0 || destY > 0 || destWidth < this.cropWidth || destHeight < this.cropHeight;
 853        this.hasBlackBorder = hasBorder;
 854        
 855        // 记录创建的canvas，以便后续释放
 856        this.tempCanvases.push(tempCanvas);
 857      },
 858    
 859    // 显示模态框
 860     // 显示模态框 - 使用新方式，先检测透明度再显示
 861     showModal(imageSrc) {
 862      // 先检测图片是否有透明通道
 863      this.detectAlphaChannel(imageSrc).then(hasAlpha => {
 864        this.hasAlphaChannel = hasAlpha;
 865        this.preserveTransparency = hasAlpha; // 如果有透明通道，默认保留
 866        
 867        this.selectedImageSrc = imageSrc;
 868        
 869        // 重置状态
 870        this.manualScale = 1; // 手动调整倍率，每次缩放时+0.1或-0.1
 871        this.rotation = 0;
 872        this.position = { x: 0, y: 0 }; // 初始位置居中
 873        this.hasBlackBorder = false;
 874        this.cropMode = 'scale'; // 重置为默认的缩放裁切模式
 875        this.isImageAreaFocused = false; // 重置焦点状态
 876        
 877        // 加载图片并设置初始尺寸
 878        const img = new Image();
 879        img.src = imageSrc;
 880        
 881        // 保存this引用，以便在回调中使用
 882        const self = this;
 883        
 884        img.onload = function() {
 885          self.imageDimensions = { width: img.width, height: img.height };
 886          
 887          // 保存原始图片数据用于高质量裁剪
 888          // 创建新的图像对象确保原始数据不受影响
 889          const originalImg = new Image();
 890          originalImg.src = self.selectedImageSrc;
 891          originalImg.onload = function() {
 892            self.originalImageData = originalImg;
 893            
 894            // 计算矩形选框的缩放比例
 895            if (self.cropMode === 'original') {
 896              // 原图裁切模式下，计算最小缩放倍率
 897              const minScale = Math.min(
 898                self.OPERATION_AREA_SIZE / img.width,
 899                self.OPERATION_AREA_SIZE / img.height,
 900                self.OPERATION_AREA_SIZE / self.cropWidth,
 901                self.OPERATION_AREA_SIZE / self.cropHeight
 902              );
 903              self.cropBoxScale = minScale;
 904            } else {
 905              // 缩放裁切模式下的原有逻辑
 906              let scaleX = 1;
 907              if (self.cropWidth > self.cropHeight) {
 908                // 宽度更长，适配宽度
 909                scaleX = self.OPERATION_AREA_SIZE / self.cropWidth;
 910              } else {
 911                // 高度更长，适配高度
 912                scaleX = self.OPERATION_AREA_SIZE / self.cropHeight;
 913              }
 914              self.cropBoxScale = scaleX;
 915            }
 916            
 917            // 计算图片相对于操作区域的初始缩放比例
 918            const imgRatio = img.width / img.height;
 919            const areaRatio = self.OPERATION_AREA_SIZE / self.OPERATION_AREA_SIZE; // 1:1
 920            
 921            let scaleY = 1;
 922            if (imgRatio > areaRatio) {
 923              // 图片更宽，按宽度缩放
 924              scaleY = self.OPERATION_AREA_SIZE / img.width;
 925            } else {
 926              // 图片更高或正方形，按高度缩放
 927              scaleY = self.OPERATION_AREA_SIZE / img.height;
 928            }
 929            self.initialImageScale = scaleY;
 930            
 931            // 绘制预览
 932            self.drawPreview();
 933          };
 934        };
 935        
 936        // 显示模态框
 937        this.isModalOpen = true;
 938      });
 939      document.body.style.overflow = 'hidden'; // 防止背景滚动
 940      
 941      // 添加键盘事件监听
 942      document.addEventListener('keydown', this.handleKeyDown);
 943    },
 944    
 945     // 隐藏模态框
 946  hideModal() {
 947    this.isModalOpen = false;
 948    document.body.style.overflow = 'auto'; // 恢复滚动
 949    // 清空状态
 950    this.selectedImageSrc = null;
 951    this.originalImageData = null; // 清空原始图片数据
 952    
 953    // 移除键盘事件监听
 954    document.removeEventListener('keydown', this.handleKeyDown);
 955    
 956    // 模态窗口关闭时释放canvas内存
 957    this.releaseCanvasMemory();
 958  },
 959    
 960    // 处理鼠标进入操作区域
 961    handleMouseEnter() {
 962      this.isImageAreaFocused = true;
 963    },
 964    
 965    // 处理鼠标离开操作区域
 966    handleMouseLeave() {
 967      this.isImageAreaFocused = false;
 968    },
 969    
 970    // 处理键盘按键事件
 971    handleKeyDown(e) {
 972      // 仅当图片操作区域获得焦点且模态框打开时才响应键盘事件
 973      if (!this.isImageAreaFocused || !this.isModalOpen) return;
 974      
 975      // 防止默认行为
 976      e.preventDefault();
 977      
 978      // 方向键移动图片，每次移动1点距离
 979      const moveDistance = 1;
 980      
 981      switch (e.key) {
 982        case 'ArrowUp':
 983          this.position.y -= moveDistance;
 984          break;
 985        case 'ArrowDown':
 986          this.position.y += moveDistance;
 987          break;
 988        case 'ArrowLeft':
 989          this.position.x -= moveDistance;
 990          break;
 991        case 'ArrowRight':
 992          this.position.x += moveDistance;
 993          break;
 994        default:
 995          return; // 不处理其他按键
 996      }
 997      
 998      // 强制重新渲染
 999      this.$forceUpdate();
1000      this.drawPreview();
1001    },
1002    
1003    // 处理鼠标滚轮事件（缩放图片）
1004    handleWheel(e) {
1005      // 仅当图片操作区域获得焦点且模态框打开时才响应滚轮事件
1006      if (!this.isImageAreaFocused || !this.isModalOpen || this.cropMode === 'original') return;
1007      
1008      // 阻止默认行为
1009      e.preventDefault();
1010      
1011      // 计算缩放增量，基于滚轮的deltaY值
1012      const zoomIncrement = e.deltaY > 0 ? -0.1 : 0.1;
1013      
1014      // 更新缩放比例
1015      this.manualScale = Math.max(0.1, this.manualScale + zoomIncrement);
1016      
1017      // 强制重新渲染
1018      this.$forceUpdate();
1019      this.drawPreview();
1020    },
1021    
1022    // 处理鼠标按下事件，开始拖动
1023    handleMouseDown(e) {
1024      e.preventDefault();
1025      this.isDragging = true;
1026      this.dragStart = {
1027        x: e.clientX - this.position.x,
1028        y: e.clientY - this.position.y,
1029      };
1030      
1031      // 绑定鼠标移动和释放事件到窗口，使用箭头函数保持this上下文
1032      document.addEventListener('mousemove', this.handleMouseMove);
1033      document.addEventListener('mouseup', this.handleMouseUp);
1034    },
1035    
1036    // 处理鼠标移动事件，更新位置
1037    handleMouseMove: function(e) {
1038      if (!this.isDragging) return;
1039      const newX = e.clientX - this.dragStart.x;
1040      const newY = e.clientY - this.dragStart.y;
1041      
1042      // 允许裁剪框自由移动，不限制边界
1043      this.position = { x: newX, y: newY };
1044      // 强制重新渲染
1045      this.$forceUpdate();
1046      this.drawPreview();
1047    },
1048    
1049    // 处理鼠标释放事件，结束拖动
1050    handleMouseUp: function() {
1051      this.isDragging = false;
1052      
1053      // 移除事件监听器
1054      document.removeEventListener('mousemove', this.handleMouseMove);
1055      document.removeEventListener('mouseup', this.handleMouseUp);
1056    },
1057    
1058    // 处理缩放 - 严格按照"先在初始位置缩放，再移动到目标位置"的逻辑
1059    handleZoom(direction) {
1060      // 如果是原图裁切模式，不允许缩放
1061      if (this.cropMode === 'original') return;
1062      
1063      // 使用加法来调整缩放比例，每次点击增加或减少0.1
1064      if (direction === 'in') {
1065        // 放大，增加0.1
1066        this.manualScale += 0.1;
1067      } else {
1068        // 缩小，减少0.1，但不允许小于0.1
1069        this.manualScale = Math.max(0.1, this.manualScale - 0.1);
1070      }
1071        
1072      // 根据用户要求删除了位置调整代码
1073      // 缩放比例变化时，图片围绕最新中心点进行缩放，不影响position.x和position.y
1074        
1075      this.drawPreview();
1076    },
1077    
1078    // 处理旋转
1079    handleRotate(degrees) {
1080      this.rotation = (this.rotation + degrees) % 360;
1081      this.drawPreview();
1082    },
1083    
1084  // 生成高清裁剪图片的函数 - 使用原始图片数据进行高质量裁剪
1085  generateCroppedImage() {
1086    return new Promise((resolve, reject) => {
1087      if (!this.selectedImageSrc || !this.originalImageData) {
1088        reject(new Error('没有图片数据'));
1089        return;
1090      }
1091      
1092      // 创建一个新的canvas用于高质量裁剪
1093      const highQualityCanvas = document.createElement('canvas');
1094      const ctx = highQualityCanvas.getContext('2d');
1095      if (!ctx) {
1096        reject(new Error('无法获取canvas上下文'));
1097        return;
1098      }
1099      
1100      // 设置canvas尺寸为裁剪尺寸
1101      highQualityCanvas.width = this.cropWidth;
1102      highQualityCanvas.height = this.cropHeight;
1103      
1104      // 记录创建的canvas，以便后续释放
1105      this.tempCanvases.push(highQualityCanvas);
1106      
1107      // 对于PNG图片，如果需要保留透明度，先清空canvas（保持透明）
1108      if (this.hasAlphaChannel && this.preserveTransparency) {
1109        ctx.clearRect(0, 0, highQualityCanvas.width, highQualityCanvas.height);
1110      } else {
1111        // 否则使用黑色背景
1112        ctx.fillStyle = '#000000';
1113        ctx.fillRect(0, 0, highQualityCanvas.width, highQualityCanvas.height);
1114      }
1115      
1116      // 使用与预览图相同的算法生成高清裁切图
1117      this.generatePreviewWithHighQualityAlgorithm(highQualityCanvas, ctx);
1118      
1119      // 将高质量canvas转换为Blob并返回，确保使用正确的MIME类型和质量
1120      highQualityCanvas.toBlob((blob) => {
1121        if (blob) {
1122          resolve(blob);
1123        } else {
1124          reject(new Error('无法生成Blob数据'));
1125        }
1126      }, 'image/png', 1.0); // 使用PNG格式和最高质量，确保透明度被正确保留
1127    });
1128  },
1129    
1130    // 处理确认裁剪
1131    async handleConfirmCrop() {
1132      try {
1133        const croppedImage = await this.generateCroppedImage();
1134        this.handleUpload(croppedImage);
1135        this.hideModal();
1136      } catch (error) {
1137        console.error('生成裁剪图片失败:', error);this.showToast('生成裁剪图片失败，请重试', 'error');
1138      }
1139    },
1140    
1141    // 处理上传原图
1142    handleUploadOriginal() {
1143      // 检查是否有选中的图片
1144      if (!this.selectedImageSrc) return;
1145      
1146      // 将base64转换为Blob对象
1147      fetch(this.selectedImageSrc)
1148        .then(res => res.blob())
1149        .then(blob => {
1150          this.handleUpload(blob);
1151          this.hideModal();
1152        })
1153        .catch(error => {
1154          this.showToast('上传原图失败，请重试', 'error');
1155          console.error('上传原图失败:', error);
1156        });
1157    },
1158    
1159    // 处理保存裁切图片到本地
1160    async handleSaveCroppedImage() {
1161      try {
1162        const croppedImage = await this.generateCroppedImage();
1163        
1164        // 创建下载链接
1165        const url = URL.createObjectURL(croppedImage);
1166        const a = document.createElement('a');
1167        a.href = url;
1168        
1169        // 设置文件名，使用当前时间戳确保唯一性
1170        const timestamp = new Date().getTime();
1171        a.download = `cropped-image-${timestamp}.png`;
1172        
1173        // 触发下载
1174        document.body.appendChild(a);
1175        a.click();
1176        
1177        // 清理
1178        document.body.removeChild(a);
1179        URL.revokeObjectURL(url);
1180        
1181        // 显示成功提示
1182        this.showToast('裁切图片已保存到本地');
1183      } catch (error) {
1184        console.error('保存裁剪图片失败:', error);
1185        this.showToast('保存裁剪图片失败，请重试', 'error');
1186      }
1187    },
1188    
1189     // 处理上传
1190  async handleUpload(croppedImage) {
1191    try {
1192      const formData = new FormData();
1193      const timestamp = new Date().getTime();
1194      let file = new File([croppedImage],`${timestamp}.png`)
1195      formData.append('file', file); // file对象上传 可以指定文件名
1196      //formData.append('image', croppedImage); //直接传blob对象 
1197      //formData.append('filename',`${timestamp}.png`);//增加额外的表单项
1198      // 执行真实的上传请求
1199      const response = await fetch(this.uploadUrl, {
1200        method: 'POST',
1201        body: formData,
1202      });
1203      
1204      if (!response.ok) {
1205        throw new Error('上传失败');
1206      }
1207      
1208      // 处理响应结果
1209      const result = await response.json();
1210      this.latestImageUrl = result.url || '';
1211      
1212       // 根据是替换还是新增来处理图片
1213      if (this.replacingImageIndex >= 0) {
1214        // 替换现有图片
1215        this.thumbnailUrls[this.replacingImageIndex] = this.latestImageUrl;
1216        // 重置替换索引
1217        this.replacingImageIndex = -1;
1218      } else {
1219        // 添加新图片
1220        this.thumbnailUrls.push(this.latestImageUrl);
1221      }
1222      
1223      this.showToast('图片上传成功');
1224      this.$emit('upload-success', this.latestImageUrl);
1225      
1226      // 上传成功后释放canvas内存
1227      this.releaseCanvasMemory();
1228    } catch (error) {
1229      this.showToast('上传失败，请重试', 'error');
1230      this.$emit('upload-error', error);
1231    }
1232  },
1233    
1234    // 释放canvas内存的方法
1235    releaseCanvasMemory() {
1236      try {
1237        // 释放临时canvas资源
1238        if (this.tempCanvases && this.tempCanvases.length > 0) {
1239          this.tempCanvases.forEach(canvas => {
1240            // 尝试清除canvas内容
1241            if (canvas && typeof canvas.getContext === 'function') {
1242              const ctx = canvas.getContext('2d');
1243              if (ctx) {
1244                // 清除canvas
1245                ctx.clearRect(0, 0, canvas.width, canvas.height);
1246                
1247                // 尝试重置canvas尺寸以释放更多内存
1248                canvas.width = 1;
1249                canvas.height = 1;
1250              }
1251            }
1252            
1253            // 从DOM中移除（如果有）
1254            if (canvas && canvas.parentNode) {
1255              canvas.parentNode.removeChild(canvas);
1256            }
1257          });
1258          
1259          // 清空数组
1260          this.tempCanvases = [];
1261        }
1262        
1263        // 释放预览canvas资源
1264        if (this.$refs.previewCanvas) {
1265          const canvas = this.$refs.previewCanvas;
1266          if (canvas && typeof canvas.getContext === 'function') {
1267            const ctx = canvas.getContext('2d');
1268            if (ctx) {
1269              ctx.clearRect(0, 0, canvas.width, canvas.height);
1270            }
1271          }
1272        }
1273      } catch (error) {
1274        console.warn('释放canvas内存时出错，但不影响程序运行:', error);
1275      }
1276    },
1277    
1278    // 查看大图 - 接收图片URL作为参数
1279    viewLargeImage(imageUrl) {
1280      this.currentLargeImage = imageUrl;
1281      this.isLargeImageOpen = true;
1282      // 禁止背景滚动
1283      document.body.style.overflow = 'hidden';
1284    },
1285    
1286    // 关闭大图预览
1287    closeLargeImage() {
1288      this.isLargeImageOpen = false;
1289      // 恢复背景滚动
1290      document.body.style.overflow = 'auto';
1291    },
1292    
1293    // 处理文件选择
1294    handleFileSelect(event) {
1295      const file = event.target.files[0];
1296      if (file) {
1297        if (!file.type.startsWith('image/')) {
1298          this.showToast('请选择有效的图片文件', 'error');
1299          return;
1300        }
1301        
1302        const reader = new FileReader();
1303        reader.onload = e => {
1304          this.showModal(e.target.result);
1305        };
1306        reader.readAsDataURL(file);
1307      }
1308      
1309      // 重置input，以便可以重复选择同一个文件
1310      this.$refs.fileInput.value = '';
1311    },
1312    
1313     // 打开文件选择器 - 用于添加新图片
1314    openAddImage() {
1315      // 检查是否已达到最大图片数量限制
1316      if (this.thumbnailUrls.length >= this.maxImages) {
1317        this.showToast(`仅支持展示${this.maxImages}张图片！`, 'error');
1318        return;
1319      }
1320      
1321      // 重置替换索引，表示这是添加新图片
1322      this.replacingImageIndex = -1;
1323      this.$refs.fileInput.click();
1324    },
1325    
1326    // 打开文件选择器 - 用于替换现有图片
1327    openReplaceImage(index) {
1328      // 设置当前正在替换的图片索引
1329      this.replacingImageIndex = index;
1330      this.$refs.fileInput.click();
1331   },
1332   
1333   // 删除图片
1334   deleteImage(index) {
1335     // 弹出确认框
1336     if (confirm('确定要删除这张图片吗？')) {
1337       // 从数组中移除指定索引的图片
1338       this.thumbnailUrls.splice(index, 1);
1339       // 显示删除成功提示
1340       this.showToast('图片已删除');
1341     }
1342   },
1343  },
1344  beforeUnmount() {
1345    // 组件卸载时释放canvas内存
1346    this.releaseCanvasMemory();
1347    
1348     // 确保移除所有事件监听器
1349    document.removeEventListener('mousemove', this.handleMouseMove);
1350    document.removeEventListener('mouseup', this.handleMouseUp);
1351    document.removeEventListener('keydown', this.handleKeyDown);
1352    
1353    // 恢复body滚动
1354    document.body.style.overflow = 'auto';
1355    
1356    // 组件卸载时释放canvas内存
1357    this.releaseCanvasMemory();
1358  },
1359};
1360</script>
1361 
1362<style scoped>
1363  /* 基础样式变量 */
1364  :root {
1365    --primary-color: #3B82F6;
1366    --bg-color: #f9fafb;
1367    --bg-gradient: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
1368    --text-color: #1f2937;
1369    --text-secondary: #4b5563;
1370    --border-color: #d1d5db;
1371    --border-dashed: #e5e7eb;
1372    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1373    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1374    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1375    --radius-lg: 0.5rem;
1376    --radius-xl: 0.5rem;
1377    --radius-full: 9999px;
1378  }
1379 
1380  /* 图片网格布局 */
1381  .images-grid {
1382    display: flex;
1383    flex-wrap: wrap;
1384    gap: 10px;
1385  }
1386  
1387  .image-item {
1388    position: relative;
1389  }
1390  
1391  .upload-item {
1392    position: relative;
1393  }
1394 
1395  .image-input {
1396    display: none;
1397  }
1398 
1399  /* 上传区域 - 无图片时 */
1400  .upload-area {
1401    display: flex;
1402    flex-direction: column;
1403    align-items: center;
1404    justify-content: center;
1405    border: 2px dashed var(--border-dashed);
1406    border-radius: var(--radius-lg);
1407    cursor: pointer;
1408    transition: all 0.3s ease;
1409    background-color: #fff;
1410    width: 100%;
1411    height: 100%;
1412  }
1413 
1414  .upload-area:hover {
1415    border-color: var(--primary-color);
1416    background-color: rgba(59, 130, 246, 0.05);
1417  }
1418 
1419  .upload-icon {
1420    font-size: 1.5rem;
1421    color: #9ca3af;
1422  }
1423 
1424   .upload-text {
1425    font-size: 0.875rem;
1426    color: var(--text-secondary);
1427    margin-top: 0.25rem;
1428  }
1429 
1430  .upload-size-info {
1431    font-size: 0.75rem;
1432    color: var(--text-secondary);
1433    opacity: 0.8;
1434    margin-top: 0.125rem;
1435  }
1436 
1437  /* 缩略图容器 */
1438  .thumbnail-container {
1439    border: 1px solid var(--border-color);
1440    border-radius: var(--radius-lg);
1441    overflow: hidden;
1442    position: relative;
1443    background-color: #f9fafb;
1444    display: flex;
1445    align-items: center;
1446    justify-content: center;
1447    width: 100%;
1448    height: 100%;
1449  }
1450 
1451   /* 缩略图样式 */
1452  .thumbnail-image {
1453    width: 100%;
1454    height: 100%;
1455    display: block;
1456    object-fit: cover;
1457    cursor: pointer;
1458  }
1459  
1460  /* 操作按钮样式 */
1461  .operation-btn {
1462    opacity: 0.5; /* 初始半透明效果 */
1463    transition: all 0.3s ease; /* 平滑过渡动画 */
1464    width:40%;
1465    cursor: pointer;
1466  }
1467  
1468  .operation-btn:hover {
1469    opacity: 1; /* 鼠标悬浮时恢复正常不透明度 */
1470  }
1471 
1472  .operation-div {
1473    height: 30px;
1474    position: absolute;
1475    display: flex;
1476    justify-content: center;
1477    align-items: center;
1478    bottom: 0;
1479    background:black;
1480    opacity: 0.5; 
1481    width: 100%;
1482    text-align: center;
1483    color:aliceblue;
1484    transition: all 0.3s ease; /* 平滑过渡动画 */
1485  }
1486  .operation-div:hover {
1487    opacity: 0.9; /* 鼠标悬浮时恢复正常不透明度 */
1488  }
1489  /* 模态框样式 */
1490  .modal {
1491    position: fixed;
1492    inset: 0;
1493    background-color: rgba(0, 0, 0, 0.7);
1494    display: flex;
1495    align-items: center;
1496    justify-content: center;
1497    padding: 1rem;
1498    z-index: 50;
1499    backdrop-filter: blur(4px);
1500  }
1501 
1502  .modal-content {
1503    background: white;
1504    border-radius: 0.5rem;
1505    max-width: 900px;
1506    width: 100%;
1507    max-height: 90vh;
1508    overflow: hidden;
1509    display: flex;
1510    flex-direction: column;
1511    animation: modalFadeIn 0.3s ease;
1512  }
1513 
1514  @keyframes modalFadeIn {
1515    from {
1516      opacity: 0;
1517      transform: scale(0.95);
1518    }
1519    to {
1520      opacity: 1;
1521      transform: scale(1);
1522    }
1523  }
1524 
1525  .modal-header {
1526    display: flex;
1527    align-items: center;
1528    justify-content: space-between;
1529    padding: 0.5rem;
1530    border-bottom: 1px solid var(--border-color);
1531  }
1532 
1533  .modal-header h2 {
1534    font-size: 1rem;
1535    font-weight: 600;
1536    display: flex;
1537    align-items: center;
1538    gap: 0.5rem;
1539  }
1540  
1541  .original-size {
1542    font-size: 0.8rem;
1543    font-weight: 400;
1544    color: var(--text-secondary);
1545    margin-left: 0.5rem;
1546  }
1547 
1548  .modal-body {
1549    display: flex;
1550    flex: 1;
1551    overflow: hidden;
1552    flex-direction: column;
1553  }
1554 
1555  @media (min-width: 768px) {
1556    .modal-body {
1557      flex-direction: row;
1558    }
1559  }
1560 
1561  /* 图片操作区域 */
1562  .image-container {
1563    flex: 1;
1564    
1565    position: relative;
1566    display: flex;
1567    align-items: center;
1568    justify-content: center;
1569    min-width: 600px;
1570    min-height: 600px;
1571  }
1572 
1573  .operation-area {
1574    background-color: #f3f4f6;
1575    width: 600px;
1576    height: 600px;
1577    position: relative;
1578    overflow: hidden;
1579    cursor: grab;
1580  }
1581 
1582  .operation-area:active {
1583    cursor: grabbing;
1584  }
1585 
1586  .preview-image {
1587    position: absolute;
1588    top: 50%;
1589    left: 50%;
1590    transform-origin: center center;
1591    max-width: none;
1592    max-height: none;
1593  }
1594 
1595  .crop-box {
1596    position: absolute;
1597    border: 2px solid var(--primary-color);
1598    background-color: rgba(59, 130, 246, 0.1);
1599    pointer-events: none;
1600    left: 50%;
1601    top: 50%;
1602    transform: translate(-50%, -50%);
1603  }
1604 
1605  /* 预览区域 */
1606  .preview-section {
1607    width: 100%;
1608    padding: 0.5rem;
1609    background: white;
1610    display: flex;
1611    flex-direction: column;
1612    align-items: center;
1613    justify-content: flex-start;
1614    overflow-y: hidden; /* 禁用垂直滚动条 */
1615  }
1616 
1617  @media (min-width: 768px) {
1618    .preview-section {
1619      width: 33.333%;
1620    }
1621  }
1622 
1623  .preview-header {
1624    display: flex;
1625    align-items: center;
1626    justify-content: center;
1627    width: 100%;
1628    margin-bottom: 1rem;
1629    margin-top: 0.5rem;
1630  }
1631 
1632  .preview-title {
1633    font-size: 1.125rem;
1634    font-weight: 500;
1635    margin-right: 0.5rem;
1636  }
1637 
1638   .preview-size {
1639    font-size: 1.125rem;
1640    font-weight: 500;
1641    margin-right: 0.5rem;
1642    color: var(--text-secondary);
1643  }
1644 
1645  /* 透明图层选项样式 */
1646  .transparency-option-container {
1647    width: 100%;
1648    display: flex;
1649    justify-content: center;
1650    align-items: center;
1651    margin-bottom: 0.5rem;
1652  }
1653  
1654  .transparency-option {
1655    font-size: 0.9rem;
1656  }
1657 
1658  .preview-wrapper {
1659    position: relative;
1660    /* box-shadow: var(--shadow-md); */
1661    margin-bottom: 0.5rem;
1662    width: 100%;
1663    display: flex;
1664    justify-content: center;
1665    overflow: hidden; /* 隐藏超出容器的内容 */
1666    max-height: 400px; /* 限制最大高度 */
1667  }
1668 
1669  .preview-canvas {
1670    width: 100%;
1671    height: auto;
1672    max-height: 400px; /* 限制canvas的最大高度 */
1673    object-fit: contain; /* 保持图片比例，完全显示在容器内 */
1674  }
1675 
1676  /* 底部控制栏 */
1677  .modal-footer {
1678    padding: 0.6rem;
1679    border-top: 1px solid var(--border-color);
1680    display: flex;
1681    flex-wrap: wrap;
1682    align-items: center;
1683    justify-content: space-between;
1684    gap: 0.5rem;
1685  }
1686 
1687  .control-group {
1688    display: flex;
1689    align-items: center;
1690    gap: 0.5rem;
1691    margin-bottom: 1rem;
1692  }
1693 
1694  @media (min-width: 768px) {
1695    .control-group {
1696      margin-bottom: 0;
1697    }
1698  }
1699 
1700  .action-group {
1701    display: flex;
1702    align-items: center;
1703    gap: 0.5rem;
1704  }
1705 
1706  /* 通知提示 */
1707  .toast {
1708    position: fixed;
1709    top: 1rem;
1710    right: 1rem;
1711    padding: 1rem;
1712    border-radius: var(--radius-lg);
1713    box-shadow: var(--shadow-lg);
1714    z-index: 50;
1715    transition: all 0.3s ease;
1716  }
1717 
1718  .toast-success {
1719    background-color: #10b981;
1720    color: white;
1721  }
1722 
1723  .toast-error {
1724    background-color: #ef4444;
1725    color: white;
1726  }
1727 
1728  /* 上传结果展示 */
1729  .upload-result {
1730    display: block;
1731  }
1732 
1733  .result-content {
1734    padding: 1rem;
1735    border: 1px solid var(--border-color);
1736    border-radius: var(--radius-lg);
1737  }
1738 
1739  .result-label {
1740    color: var(--text-secondary);
1741    margin-bottom: 0.5rem;
1742  }
1743 
1744  .result-url {
1745    display: block;
1746    background-color: #f3f4f6;
1747    padding: 0.75rem;
1748    border-radius: var(--radius-lg);
1749    font-size: 0.875rem;
1750    font-family: monospace;
1751    overflow-x: auto;
1752  }
1753 
1754  /* 大图预览浮窗样式 */
1755  .large-image-overlay {
1756    position: fixed;
1757    inset: 0;
1758    background-color: rgba(0, 0, 0, 0.9);
1759    display: flex;
1760    align-items: center;
1761    justify-content: center;
1762    z-index: 100;
1763    padding: 2rem;
1764  }
1765 
1766  .large-image-container {
1767    position: relative;
1768    max-width: 90%;
1769    max-height: 90vh;
1770  }
1771 
1772  .large-image-close {
1773    position: absolute;
1774    top: -40px;
1775    right: 0;
1776    background: rgba(255, 255, 255, 0.2);
1777    border: none;
1778    border-radius: 50%;
1779    width: 32px;
1780    height: 32px;
1781    color: white;
1782    cursor: pointer;
1783    display: flex;
1784    align-items: center;
1785    justify-content: center;
1786    transition: background-color 0.2s ease;
1787  }
1788 
1789  .large-image-close:hover {
1790    background: rgba(255, 255, 255, 0.3);
1791  }
1792 
1793  .large-image {
1794    max-width: 100%;
1795    max-height: 90vh;
1796    object-fit: contain;
1797     border-radius: 8px;
1798    }
1799  </style>

main.js

 1import { createApp } from 'vue'
 2import App from './App.vue'
 3// 引入Font Awesome图标库
 4import '@fortawesome/fontawesome-free/css/all.css'
 5// 引入Element Plus
 6import ElementPlus from 'element-plus'
 7import 'element-plus/dist/index.css'
 8// 引入Element Plus图标
 9import * as ElementPlusIconsVue from '@element-plus/icons-vue'
10 
11const app = createApp(App)
12app.use(ElementPlus)
13 
14// 注册所有Element Plus图标
15for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
16  app.component(key, component)
17}
18 
19app.mount('#app')

package.json

 1{
 2  "name": "my-vue-project",
 3  "version": "0.1.0",
 4  "private": true,
 5  "scripts": {
 6    "serve": "vue-cli-service serve",
 7    "build": "vue-cli-service build",
 8    "lint": "vue-cli-service lint"
 9  },
10  "dependencies": {
11    "core-js": "^3.8.3",
12    "@fortawesome/fontawesome-free": "^6.4.0",
13    "vue": "^3.2.13",
14    "element-plus": "^2.5.0",
15    "@element-plus/icons-vue": "^2.3.1"
16  },
17  "devDependencies": {
18    "@babel/core": "^7.12.16",
19    "@babel/eslint-parser": "^7.12.16",
20    "@vue/cli-plugin-babel": "~5.0.0",
21    "@vue/cli-plugin-eslint": "~5.0.0",
22    "@vue/cli-service": "~5.0.0",
23    "eslint": "^7.32.0",
24    "eslint-plugin-vue": "^8.0.3"
25  },
26  "eslintConfig": {
27    "root": true,
28    "env": {
29      "node": true
30    },
31    "extends": [
32      "plugin:vue/vue3-essential",
33      "eslint:recommended"
34    ],
35    "parserOptions": {
36      "parser": "@babel/eslint-parser"
37    },
38    "rules": {}
39  },
40  "browserslist": [
41    "> 1%",
42    "last 2 versions",
43    "not dead",
44    "not ie 11"
45  ]
46}

功能说明文档，大家也可以直接把这个说明文档丢给其他AI看看效果。

  1# 图片上传与裁剪工具
  2 
  3一个基于Vue 3的图片上传与裁剪组件，提供灵活的图片处理功能，支持多种尺寸裁剪、透明度保留、实时预览等特性。
  4 
  5## 🚀 功能特性
  6 
  7- **多尺寸裁剪支持**：支持正方形、矩形、竖版、横版等多种尺寸裁剪
  8- **实时预览**：裁剪过程中实时显示裁剪效果
  9- **图片操作**：支持缩放、旋转、拖拽定位等操作
 10- **透明度处理**：智能检测PNG图片透明度并提供保留选项
 11- **多图上传**：支持多张图片同时上传和管理
 12- **裁剪模式**：提供缩放裁切和原图裁切两种模式
 13- **便捷操作**：支持键盘方向键移动、鼠标滚轮缩放等快捷操作
 14- **本地保存**：支持将裁剪后的图片直接保存到本地
 15 
 16## 🛠️ 技术栈
 17 
 18- Vue 3
 19- TypeScript
 20- Element Plus
 21- Font Awesome
 22- Tailwind CSS
 23- Vite
 24 
 25## ⚡ 快速开始
 26 
 27### 安装依赖
 28 
 29```bash
 30# 使用npm
 31npm install
 32 
 33# 使用yarn
 34yarn install
 35 
 36# 使用pnpm（推荐）
 37pnpm install
 38```
 39 
 40### 运行开发服务器
 41 
 42```bash
 43# 使用npm
 44npm run dev
 45 
 46# 使用yarn
 47yarn dev
 48 
 49# 使用pnpm
 50pnpm dev
 51```
 52 
 53开发服务器将在 `http://localhost:3000` 启动。
 54 
 55### 构建生产版本
 56 
 57```bash
 58# 使用npm
 59npm run build
 60 
 61# 使用yarn
 62yarn build
 63 
 64# 使用pnpm
 65pnpm build
 66```
 67 
 68构建产物将输出到 `dist` 目录。
 69 
 70## 📖 使用示例
 71 
 72### 基本用法
 73 
 74```vue
 75<template>
 76  <ImageCropUploader
 77    :cropWidth="300"
 78    :cropHeight="300"
 79    :maxImages="1"
 80    @upload-success="handleUploadSuccess"
 81    @upload-error="handleUploadError"
 82  />
 83</template>
 84 
 85<script>
 86import ImageCropUploader from './components/ImageCropUploader.vue';
 87 
 88export default {
 89  components: {
 90    ImageCropUploader,
 91  },
 92  methods: {
 93    handleUploadSuccess(url) {
 94      console.log('上传成功:', url);
 95    },
 96    handleUploadError(error) {
 97      console.error('上传失败:', error);
 98    },
 99  },
100};
101</script>
102```
103 
104### 矩形裁剪（支持多图）
105 
106```vue
107<ImageCropUploader
108  :cropWidth="600"
109  :cropHeight="400"
110  :defaultImageUrl="[
111    'https://example.com/image1.jpg',
112    'https://example.com/image2.jpg'
113  ]"
114  :uploaderWidth="120"
115  :uploaderHeight="120"
116  :maxImages="3"
117  @upload-success="handleUploadSuccess"
118/>
119```
120 
121### 竖版裁剪
122 
123```vue
124<ImageCropUploader
125  :cropWidth="400"
126  :cropHeight="1080"
127  :uploaderWidth="120"
128  :uploaderHeight="324"
129  :maxImages="2"
130  @upload-success="handleUploadSuccess"
131/>
132```
133 
134### 横版裁剪
135 
136```vue
137<ImageCropUploader
138  :cropWidth="1080"
139  :cropHeight="40"
140  :maxImages="1"
141  @upload-success="handleUploadSuccess"
142/>
143```
144 
145## 📁 项目结构
146 
147```
148├── src/
149│   ├── components/         # 组件目录
150│   │   └── ImageCropUploader.vue  # 图片上传与裁剪组件
151│   ├── App.vue             # 应用主组件
152│   ├── main.js             # 应用入口
153│   └── vite-env.d.ts       # Vite环境类型定义
154├── index.html              # HTML入口文件
155├── package.json            # 项目配置和依赖
156└── README.md               # 项目说明文档
157```
158 
159## 🔧 组件属性
160 
161| 属性 | 类型 | 默认值 | 说明 |
162|------|------|--------|------|
163| cropWidth | Number | 300 | 裁剪区域宽度 |
164| cropHeight | Number | 300 | 裁剪区域高度 |
165| uploadUrl | String | 'https://upload.ranjuan.cn/up.php?action=upload' | 图片上传接口地址 |
166| defaultImageUrl | String/Array | null | 默认显示的图片URL，可以是单个URL或URL数组 |
167| uploaderWidth | Number | 100 | 上传区域宽度 |
168| uploaderHeight | Number | 100 | 上传区域高度 |
169| maxImages | Number | 1 | 最大允许上传的图片数量 |
170 
171## 🎯 事件
172 
173| 事件 | 说明 | 参数 |
174|------|------|------|
175| upload-success | 图片上传成功时触发 | 上传成功的图片URL |
176| upload-error | 图片上传失败时触发 | 错误信息 |
177 
178## 📝 注意事项
179 
1801. 确保上传服务器支持跨域请求
1812. 对于大图片，建议先进行压缩处理以提高性能
1823. 在移动设备上使用时，可能需要调整操作方式以适应触摸屏幕
1834. 如需自定义上传行为，可以修改组件内的`handleUpload`方法
1845. 组件支持键盘方向键移动图片，鼠标滚轮缩放图片
185 
186## 🤝 贡献
187 
188欢迎提交问题和改进建议，帮助我们完善这个工具！
189 
190## ©️ 版权信息
191 
192MIT License - 2026 图片上传与裁剪工具

后记附录

1、vue删除卸载方式，可参考（教程里的淘宝npm镜像地址已失效） https://blog.csdn.net/spechier/article/details/140502314

vue卸载[点击展开]

 1# 卸载 Vue CLI
 2npm uninstall -g @vue/cli
 3 
 4# 卸载全局的 vue
 5npm uninstall -g vue
 6npm uninstall -g vue-cli  # 旧版本
 7 
 8# 清理 npm 缓存
 9npm cache clean --force
10 
11# 手动删除文件
12# 执行npm config list后查看里面类似"user" config from C:Users用户名.npmrc的文件然后删除.npmrc文件
13 
14# 检查是否卸载成功，查不到vue版本结果表示卸载成功
15vue --version
16# 然后再进行vue安装

npm管理设置[点击展开]

 1# 查看当前镜像
 2npm config get registry
 3 
 4# 查看所有配置
 5npm config list
 6 
 7# 设置为淘宝镜像
 8npm config set registry https://registry.npmmirror.com/
 9#腾讯云 https://mirrors.cloud.tencent.com/npm/
10#华为云 https://mirrors.huaweicloud.com/repository/npm/
11#清华云 https://mirrors.tuna.tsinghua.edu.cn/npm/
12#官方默认 https://registry.npmjs.org/

2、vue安装，可参考https://www.cnblogs.com/NaiHeMy/p/17974884

安装nodejs[点击展开]

1选择长期支持版本下载安装 https://nodejs.cn/download/

安装vue[点击展开]

1# 全局安装 Vue CLI
2npm install -g @vue/cli
3 
4# 安装后检查版本
5vue --version

创建vue项目[点击展开]

 1# 交互式创建，选择vue3等待一段时间
 2vue create my-vue-project
 3# 或使用预设创建
 4vue create my-vue-project --preset default
 5 
 6cd my-vue-project
 7#安装包
 8npm install
 9 
10#运行
11npm run serve

染卷不卷'blog

AI调试136版，我做出了这款Vue图片上传裁切工具

效果图

Vue图片上传裁切项目源码

后记附录

染卷

发表评论取消回复

效果图

Vue图片上传裁切项目源码

后记附录

染卷

发表评论 取消回复

发表评论取消回复