使用vue-cropper实现最实用的图片裁剪组件

最新推荐文章于 2025-03-26 15:22:15 发布

置顶

guanguan0_0

最新推荐文章于 2025-03-26 15:22:15 发布

阅读量2.7k

点赞数

分类专栏： Vue 文章标签： vue-cropper 图片裁剪

本文链接：https://blog.youkuaiyun.com/guanguan0_0/article/details/103527493

版权

先上效果图：

1、安装vue-cropper

npm install --save vue-cropperjs

2、项目中引入使用：

（1）全局引入man.js

import Vue from 'vue'
import VueCropper from 'vue-cropper'
import 'cropperjs/dist/cropper.css'

Vue.use(VueCropper)

（2）组件中单独引用

import VueCropper from 'vue-cropper'
import 'cropperjs/dist/cropper.css'

export default {
    components: {
        VueCropper
    }
}

3、封装组件

crop.vue

<template>
  <section class="crop">
    <el-row>
      <el-col :span="18">
        <div class="cropper-div">
          <vueCropper
            height="562px"
            ref="cropper"
            :img="imgUrl"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :guides="true"
            :high="option.high"
            :fixed="option.fixed"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="opti