vue实现下载图片

旧城等待， 2022-09-14 13:22 227阅读 0赞

<template>
        <div class="dialog_content_dowload" @click="handleDowload(dialogTableData.aliAppQrPic)">下载</div>
    </template>
    <script>
        export default {
            methods: {
                handleDowload(link) {
                  let linkSplit = link.split('/')
                  console.log('==============handleDowload link',link)
                  console.log('=======linkSplit',linkSplit)
                  let name = linkSplit[linkSplit.length-1].split('.')[0]
                  let type = linkSplit[linkSplit.length-1].split('.')[1]
                  console.log('=======name',name)
                  console.log('=======type',type)
                  setTimeout(() => {
                    var image = new Image();
                    // 解决跨域 Canvas 污染问题
                    let imgType = type
                    image.setAttribute("crossOrigin", "anonymous");
                    image.onload = function () {
                        var canvas = document.createElement("canvas");
                        canvas.width = image.width;
                        canvas.height = image.height;
                        var context = canvas.getContext("2d");
                        context.drawImage(image, 0, 0, image.width, image.height);
                        var url = canvas.toDataURL("image/" + imgType); //得到图片的base64编码数据
    
                        var a = document.createElement("a"); // 生成一个a元素
                        var event = new MouseEvent("click"); // 创建一个单击事件
                        a.download = name || "photo"; // 设置图片名称
                        a.href = url; // 将生成的URL设置为a.href属性
                        a.dispatchEvent(event); // 触发a的单击事件
                    };
    
                    image.src = link;
                  }, 5000);
                },
            },
        }
    </script>
    <style lang="less">
      @import '../../style/mixin';
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
      .table_container{
        padding: 20px;
        text-align: left;
      }
      .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
      .avatar {
        width: 120px;
        height: 120px;
        display: block;
      }
      .dialog_content{
        width: 30%;
        display: inline-block;
        text-align: center;
      }
      .dialog_content_label{
        margin-top: 10px;
        font-size: 14px;
        color: #000;
        margin-bottom: 10px;
      }
      .dialog_content_dowload{
        font-size: 14px;
        color: #748dff;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .dialog_container{
        text-align: center;
      }
      .checkContainer{
        cursor: pointer;
        width: 100px;
        border: 1px solid #eee;
        text-align: center;
        padding: 4px 0px;
      }
    
    </style>
    
    <style>
      .time {
        font-size: 13px;
        color: #999;
      }
    
      .bottom {
        margin-top: 13px;
        line-height: 12px;
      }
    
      .button {
        padding: 10px;
        float: right;
      }
    
      .image {
        width: 100%;
        display: block;
      }
    
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
    
      .clearfix:after {
        clear: both
      }
    </style>

一直报跨域问题的报错

1、设置跨域   
     添加跨域条件   crossorigin="anonymous"  
    前提是后端支持这个图片跨域  
2、上面加了之后还是报错  
　　如标题所示  
　　你需要把你的项目放到服务器上面跑  
　　或者自己搭建一个本地服务器  
　　然后在访问你的html