2024.4.8今天我学习了用el-image组件如何实现图片的旋转然后保存旋转之后的图片，
代码如下：
一、新增确定按钮。
<template>
<el-image src='@/assets/xxx/xxx' @click='clickImage('@/assets/xxx/xxx')'/>
</template>
<script>
export default{
data(){
return{
img_url :''//存放图片路径
}
}
methods:{
clickImage(url){
this.img_url = url//获取选中图片路径
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
let downImg = document.createElement('i')
downImg.setAttribute('class', 'el-icon-check')
wrapper[0].appendChild(downImg)
if (wrapper.length > 0) {
wrapper[0].addEventListener('click', event => {
this.cusClickHandler(event); // 通过箭头函数将事件对象传递给cusClickHandler 方法
});
}
})
}
}
}
</script>二、写新增按钮的逻辑
主要用document.getElementsByClassName获取相关按钮的类名，通过类名设置点击事件，然后拿到图片的旋转角度，最重要的一点就是要拿到旋转之后的图片，目前我想到有两种方法：
（1）旋转好的图片前端用画布画出来然后传给后端存储。
（2）把旋转的图片路径和旋转角度传给后端，让后端旋转好图片进行覆盖。（目前用的这种）
<template>
<el-image src='@/assets/xxx/xxx' @click='clickImage('@/assets/xxx/xxx')'/>
</template>
<script>
export default{
data(){
return{
img_url :''//存放图片路径
}
}
methods:{
clickImage(url){
this.img_url = url//获取选中图片路径
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
let downImg = document.createElement('i')
downImg.setAttribute('class', 'el-icon-check')
wrapper[0].appendChild(downImg)
if (wrapper.length > 0) {
wrapper[0].addEventListener('click', event => {
this.cusClickHandler(event); // 通过箭头函数将事件对象传递给cusClickHandler 方法
});
}
})
},
cusClickHandler(e) {
if (e !== undefined) {//点击图片会触发，所以要判断
// 旋转照片（顺时针||逆时针）
if (e.target.className === 'el-icon-refresh-right' || 'el-icon-refresh-left') {
let imgUrl = this.img_url
let element = document.getElementsByClassName('el-image-viewer__img')
let degA = element[0].style.transform.substring(16)
let deg = degA.substring(0, degA.length - 4)//拿到旋转角度
// 确认修改
if (e.target.className === 'el-icon-check') {
let upload_data = {
url: imgUrl,//图片路径
angle: -deg//图片旋转角度
}
//调用接口
xxxxxxxx(upload_data).then(res => {
//关闭页面
let close = document.querySelector('.el-image-viewer__close')
close.click()
})
}
}
}
}
}
}
</script>效果如下：
三、旋转保存重新渲染
当图片可以旋转保存之后会重新图片没有重新渲染的情况，这是因为浏览器的缓存机制，所以我们需要给图片进行重新渲染，增加一个key值，在src上面也需要绑定，（注意：看了其他的案例，都是绑定一个随机数new DateTime()，这样会导致你在做其他操作的时候，图片会一直重新渲染，所以还是用key值在点击确定时候进行重新渲染比较好）
<template>
<el-image :src="'@/assets/xxx/xxx'+'?'+image_id" @click='clickImage('@/assets/xxx/xxx')' :key='image_id'/>
</template>
<script>
export default{
data(){
return{
img_url :'',//存放图片路径
image_id:0,//渲染图片
}
}
methods:{
clickImage(url){
this.img_url = url//获取选中图片路径
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
let downImg = document.createElement('i')
downImg.setAttribute('class', 'el-icon-check')
wrapper[0].appendChild(downImg)
if (wrapper.length > 0) {
wrapper[0].addEventListener('click', event => {
this.cusClickHandler(event); // 通过箭头函数将事件对象传递给cusClickHandler 方法
});
}
})
},
cusClickHandler(e) {
if (e !== undefined) {//点击图片会触发，所以要判断
// 旋转照片（顺时针||逆时针）
if (e.target.className === 'el-icon-refresh-right' || 'el-icon-refresh-left') {
let imgUrl = this.img_url
let element = document.getElementsByClassName('el-image-viewer__img')
let degA = element[0].style.transform.substring(16)
let deg = degA.substring(0, degA.length - 4)//拿到旋转角度
// 确认修改
if (e.target.className === 'el-icon-check') {
let upload_data = {
url: imgUrl,//图片路径
angle: -deg//图片旋转角度
}
//调用接口
xxxxxxxx(upload_data).then(res => {
//关闭页面
let close = document.querySelector('.el-image-viewer__close')
close.click()
this.image_id++
})
}
}
}
}
}
}
</script>
