vue项目使用cropper.js实现单图上传、多图上传、裁剪、缩放图片

小灰灰 2022-12-02 00:40 417阅读 0赞

**HTML代码**

<template>
      <div>
        <div v-if="!onOff" class="initBox clearFix">
          
          <div class="uploadLogo" v-if="ifOnePic && picPath" :style="{width: 60 * aspectRatio +'px'}">
            <img :src="baseUrl + picPath" alt @click="showCropedImage(-1)" />
            <span class="close" @click="delPic()" v-if="returnPicPath"></span>
          </div>
          
          <ul :class="{clearFix: picPath.length}" v-if="!ifOnePic">
            <li
              class="uploadpics fl"
              v-for="(item, index) in picPath"
              :key="index"
              v-if="index >count-1 ? false : true"
              :style="{width: 87.5 * aspectRatio +'px'}"
            >
              <img :src="baseUrl + item" alt @click="showCropedImage(index)" />
              <span class="close" @click="delPic(index)"></span>
            </li>
          </ul>
          
          <Modal v-model="option.showCropedImage" :footer-hide="true">
            <p slot="header">图片预览</p>
            <img
              :src="baseUrl + picPath"
              alt
              v-if="ifOnePic && option.showCropedImage"
              style="width: 100%;"
            />
            <img
              :src="baseUrl + cropedImage"
              alt
              v-if="!ifOnePic && option.showCropedImage"
              style="width: 100%;"
            />
          </Modal>
          <span class="btn" :class="{disabled:disabled}" @click="uploadPic">上传</span>
          <p class="textTitle">{
       {describe}}</p>
          <p class="textTitle red">{
       {note}}</p>
        </div>
        <div v-if="onOff">
          <div class="shadeBox"></div>
          <Card style="width:700px;height: 471px" class="uploadPic">
            <div class="head">
              <p class="title">上传图片</p>
              <span class="close" @click="_closeShade"></span>
            </div>
            <div class="content">
              <div class="contentTop clearFix">
                <input
                  type="file"
                  accept="image/png, image/jpeg, image/jpg, image/bmp"
                  @change="handleChange"
                  id="fileinput"
                  class="fileinput"
                  style="display: none"
                />
                <label class="filelabel fl" for="fileinput"> 选择图片</label>
              </div>
              <div class="contentCenter clearFix">
                
                <div class="left fl">
                  <div class="cropper">
                    <img ref="cropimg" alt />
                  </div>
                </div>
                
                <div class="right fr" :style="{height: 150/aspectRatio + 2 +'px'}">
                  <div id="preview" :style="{height: 150/aspectRatio +'px'}"></div>
                </div>
              </div>
              <div class="contentBottom clearFix">
                <div class="left fl">
                  <Tooltip content="向左旋转" placement="bottom">
                    <span class="btn turnLeft" @click="handleturnLeft"></span>
                  </Tooltip>
                  <Tooltip content="向右旋转" placement="bottom">
                    <span class="btn turnRight" @click="handleTurnRight"></span>
                  </Tooltip>
                  <Tooltip content="放大" placement="bottom">
                    <span class="btn bigger" @click="handleBigger"></span>
                  </Tooltip>
                  <Tooltip content="缩小" placement="bottom">
                    <span class="btn smaller" @click="handleSmaller"></span>
                  </Tooltip>
                  <Tooltip content="重置" placement="bottom">
                    <span class="btn reset" @click="handleReset"></span>
                  </Tooltip>
                </div>
                <div class="right fr">
                  <span class="btn" @click="ok">确认</span>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </template>

**JS代码**

**CSS代码**