使用element-ui的el-image图片预览功能支持图片下载

项目场景：工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是简单放大旋转功能，解决方法要么修改组件，要么通过 js动态渲染进去，接下来看操作解决方法：通过点击放大时，添加点击事件，然后通过append 添加按钮并且绑定事件，还是看下图吧，兄弟们，粘起来<!DOCTYPE html><html&

Fearless·

10793人浏览 · 2021-08-01 18:11:56

Fearless· · 2021-08-01 18:11:56 发布

项目场景：

工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是简单放大旋转功能，解决方法要么修改组件，要么通过 js动态渲染进去，接下来看操作

解决方法：

通过点击放大时，添加点击事件，然后通过append 添加按钮并且绑定事件，还是看下图吧，兄弟们，粘起来

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <div class="demo-image__preview" @click="checkImage">
        <el-image 
            style="width: 100px; height: 100px"
            :src="url" 
            :preview-src-list="srcList">
        </el-image>
    </div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    let vueEle=null;
    window.installImage=function(){
      console.log('下载')
      let srcUrl=document.querySelector('.el-image-viewer__img').src;
      vueEle.downloadIamge(srcUrl,'图片名字');
    }
    vueEle=new Vue({
      el: '#app',
      data: function() {
        return { 
            url:         
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
      },
      methods:{
        checkImage(){//这个事件要绑定el-image父级盒子上
          console.log('点击事件');
          let a=document.querySelector('.el-image-viewer__actions__inner');
          $(a).append(`<i class="el-icon-download" onclick="installImage()"></i>`)
        },
        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;
        }
      }
    })
  </script>
</html>

效果如下

根据需求，还可以添加别的功能按钮。

总结：

感谢你的浏览，如果对你有帮助，请多点赞关注，后续会更新更多工作中遇到的问题以及解决方法。溜了溜了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^