Vue-Cropper头像裁剪插件使用

2 篇文章 0 订阅
1 篇文章 0 订阅

1. 效果预览

在这里插入图片描述

2. 插件介绍

官网地址:[GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue](https://github.com/xyxiao001/vue-cropper?from=thosefree.com)

3 . 插件使用

下载插件

npm install vue-cropper@next

3 . 封装好的代码,拿来用即可

使用注意点

  • 组件内引用-必须

    1.  import 'vue-cropper/dist/index.css'
       import {VueCropper} from 'vue-cropper'
       import {getCurrentInstance, ref, reactive, watch} from 'vue'
      
  • 如下片段可自行更改,

    •   const dp = defineProps({ // 接收父组件参数
            realTime: "", // 实时时间
        })
        
        const de = defineEmits(["popUpClose"])
        
        const avatarUpload = () => { // 图片上传事件
            cropper.value.getCropBlob(data => {
                const formData = new FormData();
                formData.append("id", sessionStorage.getItem("userid"));
                formData.append('mf',data);  // file是你的文件对
                axios.post('/person/uploadAvatar', formData)
                    .then(response => {	// 处理后台返回的结果
                    if(response.code !== 200) return ElMessage.error(response.msg)
                    ElMessage.success(response.msg)
                    de("popUpClose", response.data)
                })
                    .catch(error => { // 处理错误
                    ElMessage.error(error.message)
                    throw error
                });
            })
        }
      

封装组件代码:

<template>

<div class = "avatar-container" @click = "">

    <el-row>
        <el-col :span = "12" style = "width: 600px; height: 300px">
            <vue-cropper
                         ref = "cropper"
                         :img = "options.img"
                         :info = "true"
                         :autoCrop = "options.autoCrop"
                         :autoCropWidth = "options.autoCropWidth"
                         :autoCropHeight = "options.autoCropHeight"
                         :fixedBox = "options.fixedBox"
                         :outputType = "options.outputType"
                         @realTime = "realTime"
                         />
    </el-col>

        <!-- 实时预览部分 -->
        <el-col :span = "12" style = "height: 300px">
            <div class = "preview-box">
                <img v-if = "previews.url" :src = "previews.url" :style="previews.img"/>
                <span v-else></span>
    </div>
    </el-col>

    </el-row>

    <el-row style = "margin-top: 12px">
        <el-col :span = "12">
            <el-row>
                <el-col :span = "8">
                    <el-upload
                               action = "#"
                               :http-request = "() => {}"
                               :before-upload = "beforeUpload"
                               :show-file-list = "false"
                               >
                        <el-button>选择</el-button>
    </el-upload>
    </el-col>
                <el-col :span = "4">
                    <el-button :icon = "Plus" @click = "changeScale(1)"></el-button>
    </el-col>
                <el-col :span = "4">
                    <el-button :icon = "Minus" @click = "changeScale(-1)"></el-button>
    </el-col>
                <el-col :span = "4">
                    <el-button :icon = "RefreshLeft" @click = "rotateLeft()"></el-button>
    </el-col>
                <el-col :span = "4">
                    <el-button :icon = "RefreshRight" @click = "rotateRight()"></el-button>
    </el-col>
    </el-row>
    </el-col>

        <el-col :span = "4" :offset = "8" style = "margin-left: 22.3%">
            <el-button type = "primary" @click = "avatarUpload()">提 交</el-button>
    </el-col>

    </el-row>
    </div>

</template>

<script setup>
    import {Plus, Minus, RefreshLeft, RefreshRight} from '@element-plus/icons-vue'
    import {ElMessage} from 'element-plus'
    import 'vue-cropper/dist/index.css'
    import {VueCropper} from 'vue-cropper'
    import {getCurrentInstance, ref, reactive, watch} from 'vue'
    import axios from "axios";

    const {proxy} = getCurrentInstance()

    const options = reactive({
        img: "https://tse1-mm.cn.bing.net/th/id/OIP-C.rBx_awzG233bGXk-4h3eeAHaFL?w=262&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7", // 裁剪图片的地址
        autoCropWidth: 200, // 默认生成截图框宽度 默认容器的 80%
        autoCropHeight: 200, // 默认生成截图框高度 默认容器的 80%
        outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
        autoCrop: true, // 是否默认生成截图框
        fixedBox: false // 固定截图框大小
    })

    let previews = ref({
        url: '',
        img: '',
    })

    // 修改图片大小 正数为变大 负数变小
    const changeScale = (num) => {
        num = num || 1
        proxy.$refs.cropper.changeScale(num)
    }
    // 向左边旋转90度
    const rotateLeft = () => {
        proxy.$refs.cropper.rotateLeft()
    }
    // 向右边旋转90度
    const rotateRight = () => {
        proxy.$refs.cropper.rotateRight()
    }


    // 上传图片处理
    const beforeUpload = (rawFile) => {
        if (rawFile.type.indexOf('image/') == -1) {
            ElMessage.error('请上传图片类型文件!')
            return false
        }
        if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('文件大小不能超过2MB!')
            return false
        }
        const reader = new FileReader()
        reader.readAsDataURL(rawFile)
        reader.onload = () => {
            // 图片在这里
            if (typeof reader.result === "string") {
                options.img = reader.result
            }
        }
    }
    // 实时预览事件
    const realTime = (data) => {
        previews.value = data
    }

    const cropper = ref(null);

    const getBase64 = () => { // 获取截图的base64编码
        cropper.value.getCropData(data => {
            console.log(data)
        })
    }

    const getBlob = () => { // 获取截图的blob
        cropper.value.getCropBlob(data => {
            console.log(data)
        })
    }

    const dp = defineProps({ // 接收父组件参数
        realTime: "", // 实时时间
    })

    const de = defineEmits(["popUpClose"])

    const avatarUpload = () => { // 图片上传事件
        console.log(sessionStorage.getItem("userid"))
        cropper.value.getCropBlob(data => {
            const formData = new FormData();
            formData.append("id", sessionStorage.getItem("userid"));
            formData.append('mf',data);  // file是你的文件对
            axios.post('/person/uploadAvatar', formData)
                .then(response => {	// 处理后台返回的结果
                if(response.code !== 200) return ElMessage.error(response.msg)
                ElMessage.success(response.msg)
                de("popUpClose", response.data)
            })
                .catch(error => { // 处理错误
                ElMessage.error(error.message)
                throw error
            });
        })
    }


</script>

<style lang = "scss" scoped>
    .avatar-container {
        .img-box {
            border-radius: 50%;
            border: 1px solid #ccc;
            width: 10vw;
            height: 10vw;
        }
    }

    .preview-box {
        position: absolute;
        top: 50%;
        transform: translate(50%, -50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px solid #ccc;
        overflow: hidden;
    }
</style>

父组件代码 - 【可要可不要】

效果预览

在这里插入图片描述

注意点

  • 根据自己的需求舍 - 留
<script setup>
import {useRoute, useRouter} from 'vue-router';
import {onMounted, reactive, ref} from "vue";
import AvatarUpload from "./avatarUpload.vue";

const router = useRouter()

const rt = reactive({
	personDTO: {}, // 个人信息对象
	show: false,

	realTime: '', // 实时时间
})

const popUpClose = (data) => {
	rt.show = false // 关闭
	rt.personDTO.photo = data // 更新头像
}

let showOverlay = ref(false)

const upload = () => { // 用户头像上传
	if(showOverlay) {
		console.log("uploading avatar")
		rt.show = true
		rt.realTime = new Date().getTime()
	}
}

</script>

<template>
	
	<el-row :gutter = "20">
		<el-col :span = "6"> <!-- 左卡片 -->
			<el-card>
				<div>个人信息</div>
				<el-divider/>
				
				<el-row type = "flex" justify = "center">
					<div
						@mouseover = "showOverlay = true"
						@mouseleave = "showOverlay = false"
						@click = "upload()"
						style = "position: relative; cursor: pointer;">
						<el-avatar :size = "120" :src = "`data:image/png;base64,${rt.personDTO.photo}`"/>
						<div v-if = "showOverlay"
						     style = "position: absolute; border-radius:50%; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;">
							<span style = "color: white; font-size: 24px;">+</span>
						</div>
					</div>
				</el-row>
				
				<!--弹出编辑-->
				<el-dialog v-model = "rt.show" style = "width:1000px; height: 800px">
					<AvatarUpload @popUpClose = "popUpClose" :realTime = "rt.realTime"/>
				</el-dialog>
				
				<el-divider/>
			
			</el-card>
		</el-col>
		
	</el-row>

</template>


<style scoped>
* {
	font-size: 12px;
}

.el-text-right {
	text-align: right;
}
</style>

EDN ! !!

  • 23
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
shearphoto2.0 是HTML5头像截图插件,拍照截图,JS截图,美工切图插件,能直接压缩数码相机图片进行截图!是互联网上写得最好的一个同类型插件 ShearPhoto 完美支持Linux Windows 服务器,国外空间等完美通过。 兼容IE6及所有浏览器,兼容PHP5.2X至PHP7.0! ShearPhoto拖动拉伸超准,超流畅,在互联网同类型软件绝对排行第一,除了shearphoto,你别无选择! JAVA用户请到http://git.oschina.net/alexyang/JFinal-shearphoto 下载 ------------------------------------------------------------------------ 从shearphoto 1.5直接跳跃到shearphoto 2.0,这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的,但是这样升级只会让shearphoto慢慢走向灭亡!结果我又辛苦了一个多星期,把shearphoto 2.0升级完成! shearphoto2.0之前,我认为没必要加入HTML5,兼容IE6 7 8就够。但是直到后来!我知道这是我一个错误的决定 因为用户并没有为shearphoto 1.5埋单,原因shearphoto 1.5没有HTML5截取,用户觉得会增加服务器负载!而且又不是本地加载图片!我一个错误的决定!导致用户份额一直没有明显大增。 shearphoto 2.0是收集所有用户的意见开发而成的! 重大的特性就是全面支持HTML5 1:支持translate3d 硬件加速移动 2:加入图片预览功能 3:加入了压缩数码相机图片, 以及HTML5 canvas本地切图,截图 但依然继续支持IE6 7 8 哦!有人问IE6 7 8不兼容HTML5啊,你骗人吗? 先不要急!shearphoto 2.0的机制是这样的:有HTML5则使用HTML5 canvas切图,截图,JS先会截取一张最合理化的截图,然后交给后端,根据用户设置,进行压缩截图 没有HTML5的浏览器则采用先上传再截取的策略,就是原先1.5的策略。 当然有些用户如果不喜欢HTML5,也可以根据接口自行关闭 4:加HTML5图片特效,就一如美图秀秀这样的特效!shearphoto一共提供14种漂亮特效,感谢腾讯AI对图片特效提供支持 shearphoto 2.0增添很多接口,大部份是HTML5的设置!请下载源码体验 shearphoto外忧内患,已经没退路了。在WEB截图界,shearphoto必须要干个第一!.shearphoto不再局限于头像截取,shearphoto更可用于商城的商品图片编辑。 shearphoto含HTML5图片压缩功能!一张十M 二十M的图,照样能帮你压成你要的容量和尺寸, 一般情况下!商城的商品图片都是通过数码相机拍摄后,要用PHOTOshop把数码相机内几十M的图片,压缩,截取,然后才能上传到商城服务器! 这样的操作是不是太麻烦了! 如果你使用shearphoto你就快捷很多了,shearphoto你只需要直接选择图片,就会帮你进行压缩截取,上传,添加到数据库。这样的一条龙服务! shearphoto 2.0的机制是无可挑剔的!但是不排除有BUG存在,如果用户遇到BUG情况,请到论坛 或官方QQ群进行反馈,我会第一时间发布补丁! shearphoto支持PHP和JAVA,JAVA由网友所写,但是JAVA版并不是太完善,使用的是以前的shearphoto1.3!我 一直很想把NET python nodejs JAVA的很完善地做出来! 可惜个人能力有限,如果你喜欢shearphoto,你又会玩 NET python nodejs JAVA,又想为互联网做贡献,那么你可以加入shearphoto团队,把这些后端版本做出来。但shearphoto没有薪水给你! shearphoto免费开源的,没有利润可图,纯粹是抱着为互联网做贡献的心态!如果你跟我一样,请加入到shearphoto后端开发 浏览器支持: 兼容IE 6 及以上的所有浏览器 后端支持: 支持PHP5.X 至 PHP7.0或以上 支持JAVA后端(shearphoto1.3开发) 系统支持: 支持linux WINDOW服务器 shearphoto采用原生JS + 原生PHP所写,绝对不含JQ插件,对JQ情有独忠的,这个插件不合适你 2015 年 9月 5 日 shearphoto作者:明哥先生 版本
要实现Vue图片裁剪上传,可以使用vue-cropper组件。以下是一个简单的实现过程: 1. 首先,在Vue项目中安装vue-cropper组件。可以使用npm或yarn来安装,命令如下: ``` npm install vue-cropper ``` 2. 在需要使用图片裁剪上传的组件中,引入vue-cropper组件。可以在组件的template中添加以下代码: ```html <template> <div> <vue-cropper ref="cropper" :src="imageSrc" :guides="true" :view-mode="1" :auto-crop-area="0.8" ></vue-cropper> <button @click="cropImage">裁剪并上传</button> </div> </template> ``` 3. 在组件的script部分,添加必要的代码。首先,引入vue-cropper组件: ```javascript import VueCropper from 'vue-cropper' ``` 然后,在components中注册vue-cropper组件: ```javascript components: { VueCropper }, ``` 接下来,定义data中的imageSrc属性,用于展示需要裁剪的图片: ```javascript data() { return { imageSrc: '图片路径' } }, ``` 4. 实现裁剪并上传功能。在methods中,定义cropImage方法: ```javascript methods: { cropImage() { const cropper = this.$refs.cropper const imageData = cropper.getCroppedCanvas().toDataURL('image/jpeg') // 将imageData发送到后端进行上传处理 // ... } }, ``` 在cropImage方法中,通过this.$refs.cropper获取vue-cropper组件实例,并使用getCroppedCanvas方法获取裁剪后的图片数据。最后,将图片数据发送到后端进行上传处理。 这样,就实现了Vue图片裁剪上传的功能。你可以根据具体的需求,自定义vue-cropper组件的属性和方法,来实现更多的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值