Vue3实现头像裁剪
- 头像裁剪
- 圆形、椭圆、正方形、长方形头像裁剪
- 自动纠正比例为 1：1
1、安装插件
"vue-cropper": "^1.1.4"- 安装的是最新版本
1.1.4，其它版本导入会报错。
npm install vue-cropper@next
2、使用
- 官方教程
- 本文采用组件内导入，其余方式前往官方地址查看
// 导入
import { ref, type Ref } from 'vue'
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper"
// 使用
<VueCropper ref="cropper" :img="cropSource" :outputSize="option.size" :outputType="option.outputType"
:autoCrop="option.autoCrop" :fixedBox="false" :autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight" :full="option.full" @realTime="realTime">
</VueCropper>
3、案例
3-1、矫正函数
- 获取到选景框较小边的宽度（可自行选择）
- 把取景框的长和宽都设为该值
const correct = () => {
const size = Math.min(cropper.value.cropW, cropper.value.cropH)
cropper.value.cropW = size
cropper.value.cropH = size
}
3-2、左旋和右旋官方有提供，直接使用即可
- this.$refs.cropper.rotateLeft() 向左边旋转90度
- this.$refs.cropper.rotateRight() 向右边旋转90度
3-3、下载函数，控制截取的头像框是否开启圆角
- 需要动态改变预览图的圆角
- 开启圆角时，下载预览图通过 canvas 画布实现
- 是否开启原图比例，如果开启，在圆角模式下需手动额外考虑图片尺寸，本例开启。
// 通过控制台，检查预览元素，获取预览图元素的类名，深度选择器选择类名，开启圆角。为其父元素动态添加类名控制切换。
<div :class="{ 'img-preview': true, 'radian': radian }" :innerHTML="previewHtml"></div>
.img-preview {
width: 300px;
height: 300px;
overflow: auto;
background-color: #cccccc2e;
border: 1px solid #cccccc4d;
display: flex;
justify-content: center;
align-items: center;
@include mixin.scroll_bar();
}
.radian {
:deep(.show-preview) {
border-radius: 50%;
}
}
下载函数
/**下载截图*/
const DownImg = () => {
// 模拟a标签点击下载
var aLink = document.createElement('a')
aLink.download = Date.now().toString()
cropper.value.getCropData((data: string) => {
// 创建一个Image对象用于加载Base64格式图片
var img = new Image()
img.src = data
img.onload = function (this: any) {
// 获取图片的原始宽度和高度
var originalWidth = this.width
var originalHeight = this.height
if (radian.value) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 开启原图比例
canvas.width = option.value.full ? originalWidth : cropper.value.cropW
canvas.height = option.value.full ? originalHeight : cropper.value.cropH
ctx?.beginPath()
ctx?.ellipse(
canvas.width / 2,
canvas.height / 2,
canvas.width / 2,
canvas.height / 2,
0,
0,
Math.PI * 2
);
ctx?.clip()
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
aLink.href = canvas.toDataURL('image/png')
aLink.click()
} else {
aLink.href = data
aLink.click()
}
}
})
}
4、有点累，懒得写了。
- 借鉴自 ```blog.csdn.net/qq332555220…
- 自己看，有问题在讨论
- 源码如下：
<template>
<div class="box">
<div class="crop">
<div class="cropper">
<VueCropper ref="cropper" :img="cropSource" :outputSize="option.size" :outputType="option.outputType"
:autoCrop="option.autoCrop" :fixedBox="false" :autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight" :full="option.full" @realTime="realTime">
</VueCropper>
</div>
<div class="view">
<div :class="{ 'img-preview': true, 'radian': radian }" :innerHTML="previewHtml"></div>
<div class="btn">
<div class="item" title="下载截图" @click="DownImg">
<el-icon>
<Download />
</el-icon>
</div>
<div class="item" title="关闭" @click="$emits('cropClose')">
<el-icon>
<Back />
</el-icon>
</div>
</div>
</div>
</div>
<div class="tool">
<el-button type="primary" @click="correct">矫正</el-button>
<el-button type="primary" @click="cropper.rotateLeft()">左旋</el-button>
<el-button type="primary" @click="cropper.rotateRight()">右旋</el-button>
<el-button type="primary" @click="arcChange">弧度</el-button>
</div>
</div>
</template>
<script setup lang='ts'>
import { Back, Download } from '@element-plus/icons-vue'
import { ref, type Ref } from 'vue'
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper"
defineProps({
cropSource: {
type: String,
required: true
}
})
const $emits = defineEmits(['cropClose'])
const cropper: any = ref({})
//参数
const option = ref({
size: 1,
outputType: 'jpg',
autoCrop: true,
fixedNumber: [1, 1],
autoCropWidth: 128,
autoCropHeight: 128,
full: true
})
const radian = ref(false)
//预览
const previewHtml: Ref<string> = ref('')
/**截图预览*/
const realTime = ((e: any) => {
previewHtml.value = e.html
})
/**下载截图*/
const DownImg = () => {
var aLink = document.createElement('a')
aLink.download = Date.now().toString()
cropper.value.getCropData((data: string) => {
// 创建一个Image对象用于加载Base64格式图片
var img = new Image()
img.src = data
img.onload = function (this: any) {
// 获取图片的原始宽度和高度
var originalWidth = this.width
var originalHeight = this.height
if (radian.value) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.width = option.value.full ? originalWidth : cropper.value.cropW
canvas.height = option.value.full ? originalHeight : cropper.value.cropH
ctx?.beginPath()
ctx?.ellipse(
canvas.width / 2,
canvas.height / 2,
canvas.width / 2,
canvas.height / 2,
0,
0,
Math.PI * 2
);
ctx?.clip()
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
aLink.href = canvas.toDataURL('image/png')
aLink.click()
} else {
aLink.href = data
aLink.click()
}
}
})
}
const correct = () => {
const size = Math.min(cropper.value.cropW, cropper.value.cropH)
cropper.value.cropW = size
cropper.value.cropH = size
}
const arcChange = () => {
radian.value = !radian.value
}
</script>
<style lang="scss" scoped>
.box {
.crop {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 1fr 300px;
grid-gap: 10px;
padding: 10px;
.cropper {
width: 100%;
height: 100%;
background-color: #cccccc2e;
border: 1px solid #cccccc4d;
}
.tool {
width: 100%;
}
.view {
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
.img-preview {
width: 300px;
height: 300px;
overflow: auto;
background-color: #cccccc2e;
border: 1px solid #cccccc4d;
display: flex;
justify-content: center;
align-items: center;
@include mixin.scroll_bar();
}
.radian {
:deep(.show-preview) {
border-radius: 50%;
}
}
.btn {
width: 100%;
display: flex;
justify-content: center;
gap: 10px;
.item {
height: 32px;
width: 32px;
margin: 0;
font-size: 20px;
box-shadow: 0px 0px 2px white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: white;
transition: all 0.5s;
box-shadow: 0.3em 0.3em 0.7em #00000015;
transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
&:nth-child(1) {
background-color: #1961fe;
}
&:nth-child(2) {
background-color: #b0a8b9;
}
&:hover {
opacity: 0.8;
}
}
}
}
}
.tool {
padding: 10px;
}
}
</style>
