vue图片裁剪 vue-cropper使用

最新推荐文章于 2025-03-05 16:45:25 发布

还没想好丶

最新推荐文章于 2025-03-05 16:45:25 发布

阅读量756

点赞数 2

分类专栏： vue组件文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/w_xiaozhi/article/details/132562709

版权

文章目录

vue图片裁剪插件vue-cropper

最近有图片裁剪的需求，做完后感觉vue-cropper这个插件使用比较方便、顺手，在此分享给大家。

vue-cropper插件使用

地址: https://github.com/xyxiao001/vue-cropper
使用:

# npm 安装
npm install vue-cropper

# yarn 安装
yarn add vue-cropper

# main.js里面使用 挂载全局
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

# 组件内使用
import {
    VueCropper } from 'vue-cropper'
components: {
   
	VueCropper
}

组件样式

在这里插入图片描述

组件封装

npm安装好vue-cropper，封装组件Qd-cropper，在组件中直接引用vue-cropper即可

<template>
  <div v-if="modal">
    <Modal v-model="modal" :loading="true" :width="1000" :mask-closable="false" ref="tablemodal">
      <p slot="header" style="text-align:center">
        <span>图片裁剪</span>
      </p>
      <div class="cropper_content">
        <div class="cropper_box">
          <div class="cropper_styl">
            <vue-cropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.outputSize"
              :outputType="option.outputType"
              :info="option.info"
              :canScale="option.canScale"
              :autoCrop="option.autoCrop"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :full="option.full"
              :fixedBox="option.fixedBox"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :centerBox="option.centerBox"
              :height="option.height"
              :infoTrue="option.infoTrue"
              :maxImgSize="option.maxImgSize"
              :enlarge="option.enlarge"
              :mode="option.mode"
              @realTime="realTime"
              @imgLoad="imgLoad"
            ></vue-cropper>
          </div>
          <div class="scope_btn">
            <label class="up_btn" for="uploads">上传图片</label>
            <input
              type="file"
              id="uploads"
              style="position: absolute; clip: rect(0 0 0 0)"
              accept="image/png, image/jpeg, image/gif, image/jpg&#