vue3图片剪裁插件vue-img-cutter使用小结
很多博主都写了vue-img-cutter这个插件怎么用,并且官网也有案例,但都是从上传图片开始的。我想要的是本来就有图片不用用户重新上传或者先删掉当前的图片再上传裁剪,重点就是:已经有图片了。
接下来说说实现代码吧
1.首先下载、安装vue-img-cutter依赖
npm install vue-img-cutter --save-dev 或者 yarn add vue-img-cutter --save-dev
2.创建CutterImg.vue文件
先在官网上选择配置,生成案例代码,然后扒拉下来,进行修改(官网:vue-img-cutter),官网上就是从开始上传图片开始的,如果需要官网的效果直接复制官网的代码修改即可。
3.接下来是根据我自己的需求修改的代码:
<template> <div> <div style="display: flex; flex-direction: row"> <ImgCutter ref="imgCutterModal" v-on:cutDown="cutDownImg" :WatermarkText="''" :is-modal="false" :tool="false" :sizeChange="false" :boxWidth="700" :boxHeight="458" :cutWidth="470" :cutHeight="270" @onPrintImg="cutterPrintImg" :originalGraph="true" style="padding: 10px" > <template #cancel> <div></div> </template> </ImgCutter> <div style="margin-left: 10px; padding: 10px"> <div style=" margin-left: 10px; padding-bottom: 20px; font-size: 18px; font-weight: bold; " > 图像预览 </div> <div style="width: 470px;height: 270px; border: 1px solid #e8e8e8; background-color: rgba(0, 0, 0, 0.1)"> <img :src="temImgPath" style="width: 100%" /> </div> </div> </div> </div> </template>
<script setup> import ImgCutter from "vue-img-cutter";//引入vue-img-cutter import { ref, watch, onMounted} from "vue"; const emit = defineEmits(["getCoverImage"]);//与父组件事件通信 const props = defineProps({ imgUrl: String, }); const temImgPath = ref(""); const imgCutterModal=ref(); watch( () => props.imgUrl, (val, o) => { temImgPath.value = props.imgUrl; imgCutterModal.value.handleOpen({ name:"封面图片", src:props.imgUrl }); } ); //实时更新预览效果 function cutterPrintImg(obj) { temImgPath.value = obj.dataURL; } // 图片裁剪点击确认后触发 function cutDownImg(option) { //向后端发送请求等 //请求成功时,emit("getCoverImage"),让父组件再次获取刚修改的新图片 } </script>
<style lang="less" scoped> .remove-btn-wrap { position: absolute; left: 0; bottom: 0; right: 0; top: 0; text-align: center; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); } .ant-upload:hover .remove-btn-wrap { display: flex; } :deep(.ant-upload) { img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } } :deep(.copyright a[data-v-391393b9]){ display: none !important; } </style>
父组件:也就是你想要用到图片剪裁的组件
<template> <CutterImg :imgUrl="imgData.propsURL" @getCoverImage="getCoverImage"></CutterImg> </template> <script setup> import CutterImg from "@/components/CutterImg.vue"; //获取封面图片 const getCoverImage = () => { //发送请求 } </script>
imgData.propsURL是来自于后端请求获取到的目前页面显示的图片地址。请自行替换。
4.修改之后的效果如下:
4.1页面显示当前的图片
4.2点击图片出现弹窗,以上代码没有加弹窗的代码是因为每个人使用的UI组件库不同,如果需要自己添加弹窗的代码即可。
4.3可以看到裁剪区域显示的是当前图片,图像预览区域显示的是当前图片剪裁后的效果。
4.4图片剪裁区域可以鼠标放大缩小和拖动剪裁框,右侧的图像预览区域会实时变化。
4.5可以点击【选择图片】按钮,上传其他的图片。最后点击确定将图片信息传递给后端。
到此这篇关于vue3图片剪裁插件vue-img-cutter的文章就介绍到这了,更多相关vue图片剪裁内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡2020-02-02vue中v-for和v-if一起使用之使用compute的示例代码
这篇文章主要介绍了vue中v-for和v-if一起使用之使用compute的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05大前端代码重构之事件拦截iOS Flutter Vue示例分析
这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-04-04Vue MVVM模型与data及methods属性超详细讲解
MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性2022-10-10
最新评论