使用element-ui的el-image图片预览增加图片下载

明天要比今天更努力一点~

已于 2024-01-29 08:08:24 修改

阅读量1.4k

点赞数

分类专栏： element 文章标签： ui vue.js elementui

于 2023-09-13 10:13:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44280090/article/details/132611993

版权

element 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在Vue应用中使用Element-UI库的el-image组件实现图片预览，并添加自定义下载功能，同时处理了跨域图片下载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="//unpkg.com/vue@2/dist/vue.js"></script>

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<!-- <div class="demo-image__preview" @click="checkImage"> -->
<div class="demo-image__preview">
  <el-image @click.stop.prevent="clickImage"
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>
</div>

methods:{
      clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName('el-image-viewer__actions__inner');
        let downImg = document.createElement('i');
        downImg.setAttribute('class', 'el-icon-download');
        wrapper[0].appendChild(downImg);
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
 
    /**
     * @description: 预览的图片给下载按钮添加事件
     */
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', () => {
        const imgUrl = document.getElementsByClassName('el-image-viewer__img')[0].src;
        const ArrCurImg = this.srcList.filter(item => {
          return item.fileUrl === imgUrl;
        });
        this.downloadIamge(imgUrl,"图片下载")
      });
    },
     downloadIamge(imgsrc, name) {//下载图片地址和图片名
          let image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = imgsrc;
        }
  }