vue点击按钮保存图片至本地

需求：项目中需要获取二维码展示出来并且能够保存到本地扫描 类似下面这种

 分析：主要是用了a标签的下载功能 ，a中 标签href实现点击下载目标链接功能，只需要在a标签里面加上download属性就可以实现下载目标链接的效果

例如：

<a href="../../../static/images/Promise.png" download="Promise.png">点击下载</a>

download是文件名，也可以不写文件名，这样下载下来就是默认文件名。

下面看代码

<div class="main">
      <img
        :src="picture"
        alt=""
        class="code"
        style="display: block"
        id="picurl"
      />
      <div class="txt">学生扫码此码，填写信息</div>
      <div class="btn" @click="downloadIamge('下载')">保存图片</div>
      <div class="bg"></div>
    </div>

// 下载
    downloadIamge(name) {
      var image = new Image();
      //跨域会导致a标签在部分浏览器中会直接打开新标签页 解决跨域 Canvas 污染问题
      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/png");

        // 生成一个a元素
        var a = document.createElement("a");
        // 创建一个单击事件
        var event = new MouseEvent("click");

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || "下载图片名称";
        // 将生成的URL设置为a.href属性
        a.href = url;

        // 触发a的单击事件
        a.dispatchEvent(event);
      };

      image.src = document.getElementById('picurl').src;
    },
  },

即可保存到本地