vue2.0 点击下载图片

接到新需求点击按钮可以下载图片，刚开始想用img标签的download功能，结果我这边下载不了就只不过是新打开一个浏览器窗口然后把图片放进去，并没有下载，后来我又调整了一下代码，下面是我整理的demo可以直接通过后台传过来链接下载，也可以下载base64位的图片

<template>
  <div class='hello'>
    <div class='img'>
      <img :src='url' alt>
    </div>
    <div class='img'>
      <img :src='baseUrl' alt>
    </div>
    <div class='btn' @click='downs'>
      <span>下载</span>
      <!-- <a :href="url" ></a> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "",
      baseUrl: ""
    };
  },
  created() {
    this.url ="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2857172539,3231616089&fm=26&gp=0.jpg";
    this.baseUrl ="64位码太长了，占地方，你们自己转码一个好了“；
  },

  methods: {
    downs() {
      //下载链接图片
      this.downloadIamge(this.url, "pic");
      //下载base64格式图片
      this.downloadFile("测试.png", this.baseUrl);
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.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"); //得到图片的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 = imgsrc + "?timeStamp=" + new Date();
    },

    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(
        new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window
        })
      ); //兼容火狐
    },

    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img {
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin: 0 auto;
  margin-top: 100px;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.btn {
  width: 200px;
  height: 50px;
  line-height: 50px;
  background-color: red;
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
}
</style>

还有一个小小的坑，如果后台传过来的图片是http://这种格式的我这边是下载不下来的汇报这个错误

具体什么原因我话没有找到，可能是浏览器觉得你的协议或者链接不安全怕泄露一些东西然后不让你下载吧，好啦就酱！