checkImage(row,type){
if(!row.userFrontImage) return
this.$nextTick(() => {
let a=document.querySelector('.el-image-viewer__actions__inner');
let ff = document.createElement('i')
let imgsrc=document.querySelector('.el-image-viewer__img').src;
ff.innerHTML = `<i class="el-icon-download""></i>`
var butClick = ff.querySelector('.el-icon-download');
butClick.addEventListener('click', ()=>{ //插入点击事件
this.downloadImage(row,imgsrc,type)
});
a.appendChild(ff)
})
},
downloadImage(row,imgsrc,type){
let {name,idNo}=row
let image = new Image();
image.setAttribute('crossOrigin', 'anonymous')
image.src = imgsrc+ "&v=" + Math.random();
this.$nextTick(() => {
//第一种 图片大小不变
const xhr = new XMLHttpRequest();
xhr.open('GET', image.src, true);
xhr.responseType = 'blob';
xhr.onload = () => {
const url = window.URL.createObjectURL(xhr.response);
const a = document.createElement('a');
a.href = url;
a.download = `${name}+${num}+${type}`
a.click();
a.remove();
}
xhr.send();
//第二种 canvas重绘
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.download = `${name}+${idNo}+${type}`
a.href = url
a.click()
a.remove()
URL.revokeObjectURL(url)
})
}
})
},
element-UI中对el-image添加下载按钮 点击事件传参
于 2024-06-24 16:17:18 首次发布