图片裁剪-cropperjs

最新推荐文章于 2025-10-09 08:51:55 发布

原创最新推荐文章于 2025-10-09 08:51:55 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

通过new Cropper 构建裁剪

安装插件： cropperjs

npm install cropperjs --save

// html

  <el-upload
                                        v-model="ruleForm.image"
                                        class="avatar-uploader"
                                        action="#"
                                        :limit="1"
                                        drag
                                        :before-upload="beforeUpload"
                                        :show-file-list="false"
                                        accept="image/png,  image/jpg, image/jpeg"
                                        style="width: 100%; height: 100%; color: '#409EFF'"
                                      >
                                        <div class="gift_dialog_imgbox">
                                          <div
                                            v-if="fileSetImg.url"
                                            class="gift_dialog_img"
                                            :style="{                                                             backgroundImage:`url(${fileSetImg.url})` }"
                                          >
                                            <div class="gift_dialog_iconbox">
                                              <Icon
                                                @click.stop="handlePictureCardPreview"
                                                icon="svg-icon:vector"
                                                class="gift_dialog_icon"
                                              />
                                          <--    <Icon
                                                @click.stop="handleRemove"
                                                icon="svg-icon:delete"
                                                class="gift_dialog_icon ml-10px"
                                              />
                                           -->
                                            </div>
                                          </div>
                                          <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                          </el-icon>
                                        </div>
                                      </el-upload>


// script
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

const cropper = ref(null)
const cropperHeight = ref()
const cropperWidth = ref()
const showImgDialogVisible = ref(false)
const banSayVisibility = ref(false)
let fileSetImg = ref<any>({
  url: '',
  name: '',
  base64: null
})


const handlePictureCardPreview: UploadProps['onPreview'] = async (uploadFile) => {
  // createImageViewer({
  //   urlList: [fileImg.value.url]
  // })
  showImgDialogVisible.value = true
  cropper.value && cropper.value.destroy()
  nextTick(() => {
    if (imageRef.value) {
      cropper.value = new Cropper(imageRef.value, {
        // 宽高比
        aspectRatio: 4 / 3, //设置裁剪框为固定的宽高比
        viewMode: 1,
        // 预览
        preview: '.image-view',
        // cropBoxResizable: false,
        background: false,
        crop(event) {
          cropperHeight.value = parseInt(event.detail.height)
          cropperWidth.value = parseInt(event.detail.width)
        },
        cropend() {
          // cropper.value = null
        }
      })
    }
  })
}