位置: IT常识 - 正文

在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)(vue项目使用rem)

编辑:rootadmin
在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果) 文章目录前言一、使用步骤1.安装库2.引入库3.在component文件夹中新建一个裁剪Vue文件4.在父组件中使用(HTML)5.定义props传参(TS)6.核心方法(TS)总结前言

推荐整理分享在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)(vue项目使用rem),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目中使用高德地图,vue3项目中使用高德地图,vue在项目中怎么用的,vue3项目中使用代码编辑工具,vue3项目中使用代码编辑工具,vue3项目中使用vue2组件,vue3项目中使用代码编辑工具,vue3项目中使用el-dialog,内容如对您有帮助,希望把文章链接给更多的朋友!

某次看到后台系统中使用到了裁剪组件,感觉挺好玩的并且最近也在学Vue3和Ts,所以就研究了VueCropper组件,封装了裁剪组件,效果如下图。

一、使用步骤1.安装库在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)(vue项目使用rem)

npm i vue-cropper --save

2.引入库

代码如下(示例):

import ‘vue-cropper/dist/index.css’ import { VueCropper } from ‘vue-cropper’

3.在component文件夹中新建一个裁剪Vue文件

TipsDialog是我自己封装的dialog组件,可以替换成el-dialog

<template> <div> <input ref="reuploadInput" type="file" accept="image/*" @change="onChange" id="fileBtn" style="display: none" > <TipsDialog :visible="dialogVisible" :title="'图片裁剪'" :width="'40%'" :custom-class="'upload_dialog'" @close="dialogVisible = false" > // 核心内容 <template #default> <div class="cropper"> // 裁剪左侧内容 <div class="cropper_left"> <vueCropper :tyle="{ width: '400px'}" ref="cropperRef" :img="options.img" :info="true" :info-true="options.infoTrue" :auto-crop="options.autoCrop" :fixed-box="options.fixedBox" :can-move="options.canMoveBox" :can-scale="options.canScale" :fixed-number="fixedNumber" :fixed="options.fixed" :full="options.full" :center-box="options.centerBox" @real-time="previewHandle" /> <div class="reupload_box"> <div class="reupload_text" @click="uploadFile('reload')" > 重新上传 </div> <div> <el-icon class="rotate_right" @click="changeScale(1)" > <CirclePlus /> </el-icon> <el-icon class="rotate_right" @click="changeScale(-1)" > <Remove /> </el-icon> <el-icon class="rotate_right" @click="rotateRight" > <RefreshRight /> </el-icon> </div> </div> </div> <div class="cropper_right"> <div class="preview_text"> 预览 </div> <div :style="getStyle" class="previewImg" > <div :style="previewFileStyle"> <img :style="previews.img" :src="previews.url" alt="" > </div> </div> </div> </div> </template> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="" @click="refreshCrop" >重置</el-button> <el-button type="primary" @click="onConfirm" > 确认 </el-button> </span> </template> </TipsDialog> </div></template><script lang="ts" setup>// 需要引入的库import 'vue-cropper/dist/index.css'import { VueCropper } from 'vue-cropper'import { ref, watch, reactive } from 'vue'import TipsDialog from '~/components/TipsDialog/TipsDialog.vue' // 封装的dialog组件import { ElMessage } from 'element-plus'import { commonApi } from '../../api' // 封装的apiconst dialogVisible = ref<boolean>(false) // dialog的显示与隐藏const emits = defineEmits(['confirm']) // 自定义事件// 裁剪组件需要使用到的参数interface Options { img: string | ArrayBuffer | null // 裁剪图片的地址 info: true // 裁剪框的大小信息 outputSize: number // 裁剪生成图片的质量 [1至0.1] outputType: string // 裁剪生成图片的格式 canScale: boolean // 图片是否允许滚轮缩放 autoCrop: boolean // 是否默认生成截图框 autoCropWidth: number // 默认生成截图框宽度 autoCropHeight: number // 默认生成截图框高度 fixedBox: boolean // 固定截图框大小 不允许改变 fixed: boolean // 是否开启截图框宽高固定比例 fixedNumber: Array<number> // 截图框的宽高比例 需要配合centerBox一起使用才能生效 full: boolean // 是否输出原图比例的截图 canMoveBox: boolean // 截图框能否拖动 original: boolean // 上传图片按照原始比例渲染 centerBox: boolean // 截图框是否被限制在图片里面 infoTrue: boolean // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 accept: string // 上传允许的格式}// 父组件传参propsinterface IProps { type: string // 上传类型, 企业logo / 浏览器logo allowTypeList: string[] // 接收允许上传的图片类型 limitSize: number // 限制大小 fixedNumber: number[] // 截图框的宽高比例 fixedNumberAider?: number[] // 侧边栏收起截图框的宽高比例 previewWidth: number // 预览宽度 title?: string // 裁剪标题}// 预览样式interface IStyle { width: number | string, height: number | string}/* 父组件传参 */const props = withDefaults(defineProps<IProps>(), { type: 'systemLogo', allowTypeList: () => ['jpg', 'png', 'jpeg'], limitSize: 1, fixedNumber: () => [1, 1], fixedNumberAider: () => [1, 1], previewWidth: 228, title: 'LOGO裁剪'})// 裁剪组件需要使用到的参数const options = reactive<Options>({ img: '', // 需要剪裁的图片 autoCrop: true, // 是否默认生成截图框 autoCropWidth: 150, // 默认生成截图框的宽度 autoCropHeight: 150, // 默认生成截图框的长度 fixedBox: false, // 是否固定截图框的大小 不允许改变 info: true, // 裁剪框的大小信息 outputSize: 1, // 裁剪生成图片的质量 [1至0.1] outputType: 'png', // 裁剪生成图片的格式 canScale: true, // 图片是否允许滚轮缩放 fixed: true, // 是否开启截图框宽高固定比例 fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1 full: true, // 是否输出原图比例的截图 canMoveBox: false, // 截图框能否拖动 original: false, // 上传图片按照原始比例渲染 centerBox: true, // 截图框是否被限制在图片里面 infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon'})const getStyle = ref<IStyle>({ width: '', height: ''})/* 允许上传的类型 */const acceptType = ref<string[]>([])// 裁剪后的预览样式信息const previews: any = ref({})const previewFileStyle = ref({})// 裁剪组件Refconst cropperRef: any = ref({})// input组件Refconst reuploadInput = ref<HTMLElement | null | undefined>()// 回显图片使用的方法const onChange = (e: any) => { const file = e.target.files[0] const URL = window.URL || window.webkitURL // 上传图片前置钩子,用于判断限制类型用 if (beforeUploadEvent(file)) { options.img = URL.createObjectURL(file) dialogVisible.value = true }}/* 上传图片前置拦截函数 */const beforeUploadEvent = (file: File) => { const type = file.name.substring(file.name.lastIndexOf('.') + 1) // 获得图片上传后缀 // 判断是否符合上传类型 const isAllowTye = props.allowTypeList.some(item => { return item === type }) if (!isAllowTye) { ElMessage.error(`仅支持${acceptType.value.join('、')}格式的图片`) return false } return true}/* 重置裁剪组件 */const refreshCrop = () => { // cropperRef裁剪组件自带很多方法,可以打印看看 cropperRef.value.refresh()}/* 右旋转图片 */const rotateRight = () => { cropperRef.value.rotateRight()}/* 放大缩小图片比例 */const changeScale = (num: number) => { const scale = num || 1 cropperRef.value.changeScale(scale)}// 缩放的格式const tempScale = ref<number>(0)// 点击上传const uploadFile = (type: string): void => { /* 打开新的上传文件无需生成新的input元素 */ if (type === 'reupload') { reuploadInput.value?.click() return } let input: HTMLInputElement | null = document.createElement('input') input.type = 'file' input.accept = options.accept input.onchange = onChange input.click() input = null}/* 上传成功方法 */const cropperSuccess = async (dataFile: File) => { const fileFormData = new FormData() fileFormData.append('file', dataFile) // 在接口请求中需要上传file文件格式, 并且该接口需要改header头部为form-data格式 const { code, data } = await commonApi.uploadFile(fileFormData) if (code.value === 200 && data.value) { return data.value } // 之前调用接口的方式 // axios('http://localhost:3001/adminSystem/common/api/upload', { // data: fileFormData, // method: 'POST', // headers: { // 'Content-Type': 'multipart/form-data' // } // }).then(async (result: any) => { // const res = await result // console.log(res, 'res') // }).catch((err: any) => { // console.log(err, 'err') // })} // base64转图片文件const dataURLtoFile = (dataUrl: string, filename: string) => { const arr = dataUrl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let len = bstr.length const u8arr = new Uint8Array(len) while (len--) { u8arr[len] = bstr.charCodeAt(len) } return new File([u8arr], filename, { type: mime })}// 上传图片(点击保存按钮)const onConfirm = () => { cropperRef.value.getCropData(async (data: string) => { const dataFile: File = dataURLtoFile(data, 'images.png') const res = await cropperSuccess(dataFile) // 触发自定义事件 emits('confirm', res) return res }) dialogVisible.value = false}// 裁剪之后的数据const previewHandle = (data: any) => { previews.value = data // 预览img图片 tempScale.value = props.previewWidth / data.w previewFileStyle.value = { width: data.w + 'px', height: data.h + 'px', margin: 0, overflow: 'hidden', zoom: tempScale.value, position: 'relative', border: '1px solid #e8e8e8', 'border-radius': '2px' }}watch( () => props, () => { /* 预览样式 */ getStyle.value = { width: props.previewWidth + 'px', // 预览宽度 height: props.previewWidth / props.fixedNumber[0] + 'px' // 预览高度 } // 上传格式tips信息 acceptType.value = [] for (let i = 0; i < props.allowTypeList.length; i++) { acceptType.value.push(props.allowTypeList[i].toUpperCase()) } }, { deep: true })/* 向子组件抛出上传事件 */defineExpose({ uploadFile})</script><style lang="scss" scoped>.cropper { width: 100%; height: 50vh; display: flex; overflow: hidden; .cropper_left { display: flex; flex-direction: column; .reupload_box { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; .reupload_text { color: var(--primary-color); cursor: pointer; } .rotate_right { margin-left: 16px; cursor: pointer; } } } .cropper_right { flex: 1; margin-left: 44px; .preview_text { margin-bottom: 12px; } }}</style>4.在父组件中使用(HTML)// 引入裁剪组件import clipperDialog from '~/components/clipperDialog/clipperDialog.vue'HTML<clipperDialog ref="clipperRef" :type="clipperData.type" :allow-type-list="clipperData.allowTypeList" :limit-size="clipperData.limitSize" :fixed-number="clipperData.fixedNumber" :fixed-number-aider="clipperData.fixedNumberAider" :preview-width="clipperData.previewWidth" @confirm="onConfirm"/>5.定义props传参(TS)JS// 定义interface类型interface IClipper { type: string // 上传类型 allowTypeList: string[] // 接收允许上传的图片类型 limitSize: number // 限制大小 fixedNumber: number[] // 截图框的宽高比例 fixedNumberAider?: number[] // 侧边栏收起截图框的宽高比例 previewWidth: number // 预览宽度 previewWidthAider?: number // 侧边栏收起预览宽度}const clipperData = ref<IClipper>({ type: '', allowTypeList: [], limitSize: 1, fixedNumber: [], previewWidth: 0})6.核心方法(TS)/* 浏览器logo上传 */const browserUpload = (): void => { clipperData.value = { type: 'browserLogo', // 该参数可根据实际要求修改类型 allowTypeList: ['png', 'jpg', 'jpeg', 'peeee'], // 允许上传的图片格式 limitSize: 1, // 限制的大小 fixedNumber: [1, 1], // 截图比例,可根据实际情况进行修改 previewWidth: 100 // 预览宽度 } // 打开裁剪组件 clipperRef.value.uploadFile()}/* 保存logo自定义事件, 实际业务在此编写 */const onConfirm = (val: any): void => { console.log(val, '点击保存按钮后的图片信息')}总结

以上就是我封装的裁剪组件,或许存在一些不足之处,还请大佬们多多指教!

灵感来源:vue项目添加图片裁剪组件

本文链接地址:https://www.jiuchutong.com/zhishi/299465.html 转载请保留说明!

上一篇:JavaScript数组(四):判断数组相等的4种方法

下一篇:CSS盒子模型(css盒子模型怎么做)

  • 公司股东变更需要本人到场吗
  • 贷款其他消费是指什么
  • 个人劳务票必须本人开吗
  • 收到银行承兑汇票怎么接收
  • 库存商品发出汇总表
  • 固定资产出售损益
  • 转登记小规模纳税人转让固定资产
  • 增值税发票作废如何处理
  • 差旅费报销怎么做账
  • 企业垫付土地补偿款
  • 固定资产转到别人账户
  • 我们4月10日
  • 增资有哪些途径
  • 党员参加集体活动规定
  • 小规模纳税人注销需要查账吗
  • 商业银行贷款的流动性与效益性成正比
  • 公允价值变动损益转入其他业务成本
  • 坏账准备需要做账吗
  • 当无法取得对应报价时,将以即时现价报单
  • 批发led电子屏
  • 非居民企业间接转让中国应税财产
  • 公司加农户经营模式
  • 腾讯电脑管家流量监控不显示
  • dolby audio设置
  • 其他应付款冲回计入哪个科目
  • 代扣代缴返还的手续费科目
  • thinkphp 路由
  • 银行承兑汇票质押率90%
  • 向国外个人支付的佣金是否缴纳个人所得税
  • 零售环节的金银首饰需征收增值税吗
  • 股票的发行费用怎么入账
  • 营业外收支计算公式
  • PHP:imagecreatefromjpeg()的用法_GD库图像处理函数
  • 矿产资源补偿费计入管理费用吗
  • 小规模纳税人实收资本印花税怎么算
  • web前后端连接
  • php demo
  • 0.96寸OLED显示汉字
  • chattr i
  • 横看成横看成岭侧成峰的下一句
  • 织梦相关文章调用
  • 帝国cms会员发布信息数量
  • 预支报销单
  • 资产负债表跟利润表勾稽关系公式
  • SQL Sever2008r2 数据库服务各种无法启动问题的解决办法(详解)
  • sqlserver 存储过程 临时表
  • mysql查询某个字段重复数据
  • 重复报销怎么写情况说明
  • 注册资本与实收资本是否一致
  • 工会经费的会计分录2022
  • 税控技术维护费普通发票可以抵扣吗
  • 外币转入账户什么意思
  • 加计减免其他收入怎么填
  • 小规模纳税人每个季度超过了30万怎么办
  • 什么情形不属于共同犯罪
  • 工程施工和主营业务成本关系
  • sql中的递归
  • win8更新到win8.1
  • xp系统弹出帮助和支持
  • 电脑如何安装Anaconda
  • win8安全模式黑屏
  • win7系统关机没反应
  • os x10.8.5
  • kmswin7激活步骤
  • win7打印无反应
  • virtualbox开启虚拟化
  • linux查看远程服务是否开启
  • jquery 输出
  • gin项目
  • javascript高级程序设计第五版 pdf下载
  • javascript教程chm
  • 学习JavaScript事件流和事件处理程序
  • javascript获取数据类型
  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
  • android 获取手机屏幕截图
  • 个体税务申报时间怎么填
  • 房租计入待摊费用
  • 12366纳税服务热线存在的问题
  • 深圳国委
  • 草地耕地占用税征收标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设