vue中实现图片裁剪

在现代Web应用中，图片处理是一个常见的需求。本文将介绍如何使用Vue.js结合Cropper.js实现一个简单的图片裁剪功能。以下是实现该功能的完整代码。

代码实现

<template>
  <div class="c-copper-container" :class="{'wd260' : type == 'articlesubmit'}">
    <div class="c-copper-box">
      <div class="c-image-box">
        <img :src="copperImgUrl" id="image" alt="暂无图片">
      </div>
      <div class="c-preview-box">
        <div class="img-preview">
          <div class="title">预览</div>
          <div class="preview"><img :src="copperImgUrl" alt="暂无图片"></div>
        </div>
        <div class="img-upload-btn">
          <el-button icon="cs-format-image" size="mini" plain>上传图片</el-button>
          <input type="file" accept="image/png,image/jpeg,image/jpg" id="imgFile" @change="getFile">
        </div>
      </div>
    </div