VUE：vue3.x使用图片裁剪插件vue-picture-cropper
2024-06-02 03:15:31
简介
vue项目，当需要裁剪图片时，vue插件中有一个很方便的图片裁剪工具：vue-picture-cropper。
参看文献：Vue 3.0图片裁切插件：vue-picture-cropper
此处是以vue3.x + Ant Design 3.x进行编码示范。
具体实现
第一步，安装
npm i vue-picture-cropper
第二步，组件
此处举例固定最大选择范围框（默认为所传图片的宽高的最小值为界限）
目录：components/globalCrop/index.vue
<template><a-modalclass="image-crop-box":visible="displayCropModal":destroyOnClose="true":footer="null":maskClosable="false":width="1200"title="图片裁剪"@cancel="handleModalCancel"><div class="modal-content"><!-- 图片裁切插件 --><VuePictureCropper:boxStyle="{width: '100%',height: '100%',backgroundColor: '#f8f8f8',margin: 'auto'}":img="pic":options="{viewMode: 1,dragMode: 'move',aspectRatio: 1,cropBoxResizable: false}":presetMode="{mode: 'fixedSize',width: imgSize,height: imgSize}"/></div><div class="modal-foot"><div class="modal-foot-contain"><div class="modal-foot-btn" @click="rorateImg(1)">旋转+</div><div class="modal-foot-btn" @click="rorateImg(-1)">旋转-</div></div><div class="modal-foot-contain"><div class="modal-foot-btn" @click="handleModalSure">提交</div><div class="modal-foot-btn" @click="handleModalCancel">取消</div></div></div></a-modal>
</template><script>
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
import { reactive, ref, toRefs, onMounted } from 'vue'
export default {components: {VuePictureCropper},setup(props, context) {// #region 变量const state = reactive({displayCropModal: false, // 弹框是否可见degreeNum: 0, // 旋转度数的次数onLoading: false, // 是否加载中imgSize: 300 // 图片固定宽高})// 图片显示const result = reactive({dataURL: '',blobURL: ''})const pic = ref('')// #endregion// #region 生命周期、监听、计算 函数onMounted(() => {})// #endregion// #region 页面操作方法// 生成：所选图片的裁剪画布const initCropInfo = file => {// 重置上一次的结果result.dataURL = ''result.blobURL = ''// 如果有多个裁剪框，也需要重置掉裁剪目标的值，避免使用同一张图片无法触发watchpic.value = ''if (!file) return// 转换为base64传给裁切组件const reader = new FileReader()reader.onload = () => {// 更新裁切弹窗的图片源pic.value = String(reader.result)// 获取加载出来的图片的最小宽或高let img = new Image()img.src = reader.resultimg.onload = function () {if (this.width <= this.height) {state.imgSize = this.width} else {state.imgSize = this.height}}// cropper.reset() // 重置默认的裁切区域// 显示裁切弹窗state.displayCropModal = true}reader.readAsDataURL(file)}// 操作：旋转const rorateImg = async num => {state.degreeNum += num// 设置旋转一次的幅度为 90°cropper.rotateTo((state.degreeNum % 4) * 90)}// 操作：裁剪框-确定const handleModalSure = async () => {if (state.onLoading) returnstate.onLoading = true// 获取生成的base64图片地址const base64 = cropper.getDataURL()// 获取生成的blob文件信息const blob = await cropper.getBlob()// 获取生成的file文件信息const file = await cropper.getFile({// fileName: '测试文件名，可不传'})// console.log({ base64, blob, file })// 把base64赋给结果展示区result.dataURL = base64try {result.blobURL = URL.createObjectURL(blob)} catch (e) {result.blobURL = ''}context.emit('handleModalSure', file)state.displayCropModal = falsestate.onLoading = false}// 操作：裁剪框-取消const handleModalCancel = () => {context.emit('handleModalCancel')state.displayCropModal = false}// #endregionreturn {...toRefs(state),initCropInfo,result,pic,rorateImg,handleModalSure,handleModalCancel}}
}
</script><style lang="less">
.image-crop-box {position: relative;top: calc(50% - 40vh);.ant-modal-content {.ant-modal-body {width: 100%;height: calc(80vh - 55px);overflow: hidden;.modal-title {width: 100%;margin-top: 18px; // 42 - 24margin-bottom: 40px;text-align: center;font-size: 36px;font-weight: bold;color: #333;}.modal-content {height: calc(100% - 40px - 30px);width: 100%;}.modal-foot {margin-top: 30px;display: flex;justify-content: space-between;align-items: center;.modal-foot-contain {display: flex;align-items: center;}.modal-foot-btn {width: 112px;height: 40px;margin: 0 8px;border-radius: 6px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold;color: #333;box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);cursor: pointer;&:hover {box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);}}}}}
}
</style>
第三步，使用
将目标图片文件，通过proxy.$refs.globalCropRef.initCropInfo(file)进行初始化调用。在调用裁剪组件中的initCropInfo方法时，需要传递file。
// html
<template><div><GlobalCropref="globalCropRef"@handleModalSure="handleCropModalSure"@handleModalCancel="handleCropModalCancel" /></div>
</template>
// js
import GlobalCrop from '@/components/globalCrop'
import { getCurrentInstance } from 'vue'
export default {setup() {const { proxy } = getCurrentInstance()// 准备上传文件的选择结果const handleUpload = file => {console.log(file)proxy.$refs.globalCropRef.initCropInfo(file)}// 操作：裁剪框-确定const handleCropModalSure = file => {console.log(file)// 进行图片上传到服务器// TODO。。。// 注意上传组件的显示内容的更新// TODO。。。}// 操作：裁剪框-取消const handleCropModalCancel = () => {// 取消裁剪后需要做的操作，TODO。。。}return {handleUpload,handleCropModalSure,handleCropModalCancel}}
}
最后
觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！
VUE：vue3.x使用图片裁剪插件vue-picture-cropper相关推荐
- uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
- jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- 微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸 功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
- 一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
- 几个jQuery的图片裁剪插件
[url]http://hi.baidu.com/coffeant/item/9931bd684220d237ac3e8396[/url] 项目里最近也要用到图片裁剪插件,刚巧发现了几个就记录在这里. ...
- 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...
最新文章
- JFinal Extensions 2.0 发布，JFinal 扩展
- Linux如何找到所有elf文件,linux – ELF文件中的导入表在哪里？
- 跨链(8)Cosmos之“跨链交互协议IBC”前言
- SasSHRM中基于shiro的认证授权：环境搭建
- RAPI简单说明及Sample Code
- python入门if语句练习_python入门视频：09 if语句_练习.mp4
- 获取淘宝开发平台的sessionKey
- 【Python】字典类型
- 解决IIS数据库连接出错方法
- Source does not fit in dest
- SVM入门（十）将SVM用于多类分类
- JSchException: Algorithm negotiation fail
- 玩转电脑|电脑回收站还能这么玩，自定义图标让你的回收站与众不同
- 如何防止QT程序未响应
- Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
- Win11 全新壁纸下载
- 【自然语言处理-2】word2vec词嵌入算法“男人”+“女人”=“爱情的坟墓”
- 从游戏到赚钱，区块链如何改变电子游戏的面貌？
- Java对接云mas发送短信（https方式）
- Java继承（extends ）