vue-cropper | vue图片剪裁组件


源码介绍

简要教程

要使用vue-cropper这个插件,您需要遵循以下步骤:

  • 下载vue-cropper的代码库,并将其添加到您的项目中。
  • 在您的Vue.js组件中,引入vue-cropper并在模板中使用。
  • 通过props属性传递图片的URL给vue-cropper组件。
  • 通过监听vue-cropper的事件来获取裁剪后的图片。

使用方法

安装

如果您想使用vue-cropper图片裁剪插件,首先您需要安装它,命令如下:

// npm 安装
npm install vue-cropper
// yarn 安装
yarn add vue-cropper
		
使用

Vue3 全局引入

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')
		

Vue 3 组件内引入

npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
		

Vue2 全局引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
		

Vue2 组件内引入

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}
		

示例代码

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :img="imgUrl"
      :size="size"
      :outputSize="outputSize"
      :canScale="canScale"
      :autoCrop="autoCrop"
      :autoCropWidth="autoCropWidth"
      :autoCropHeight="autoCropHeight"
      :fixed="fixed"
      :fixedNumber="fixedNumber"
      @cropend="cropend"
    />
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

// js
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imgUrl: '/path/to/image.jpg',
      size: {
        width: 200,
        height: 200
      },
      outputSize: {
        width: 1000,
        height: 1000
      },
      canScale: true,
      autoCrop: true,
      autoCropWidth: 160,
      autoCropHeight: 90,
      fixed: false,
      fixedNumber: [1, 1]
    }
  },
  methods: {
    cropImage() {
      this.$refs.cropper.getCropData(data => {
      	console.log(data)
      })
    },
    cropend(dataUrl) {
      console.log(dataUrl)
    }
  }
}			
		

其中,imgUrl为需要裁剪的图片的URL地址,outputSize为裁剪后输出的图片大小,cropImage是自定义的裁剪方法,用于获取裁剪后的图片数据。

配置参数

名称 功能 默认值 可选值
img 裁剪图片的地址 url 地址, base64, blob
outputSize 裁剪生成图片的质量 1 0.1 ~ 1
outputType 裁剪生成图片的格式 jpg (jpg 需要传入jpeg) jpeg, png, webp
info 裁剪框的大小信息 true true, false
canScale 图片是否允许滚轮缩放 true true, false
autoCrop 是否默认生成截图框 false true, false
autoCropWidth 默认生成截图框宽度 容器的 80% 0 ~ max
autoCropHeight 默认生成截图框高度 容器的 80% 0 ~ max
fixed 是否开启截图框宽高固定比例 false true, false
fixedNumber 截图框的宽高比例 [1, 1] [ 宽度 , 高度 ]
full 是否输出原图比例的截图 false true, false
fixedBox 固定截图框大小 不允许改变 false
canMove 上传图片是否可以移动 true true, false
canMoveBox 截图框能否拖动 true true, false
original 上传图片按照原始比例渲染 false true, false
centerBox 截图框是否被限制在图片里面 false true, false
high 是否按照设备的dpr 输出等比例图片 true true, false
infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true, false
maxImgSize 限制图片最大宽度和高度 2000 0 ~ max
enlarge 图片根据截图框输出比例倍数 1 0 ~ max(建议不要太大不然会卡死的呢)
mode 图片默认渲染方式 contain contain , cover, 100px, 100% auto
limitMinSize 裁剪框限制最小区域 10 Number, Array, String

github网址:https://github.com/xyxiao001/vue-cropper



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部