element-UI中对el-image添加下载按钮 点击事件传参

	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)
            })
          }
        })
      },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值