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://這種格式的我這邊是下載不下來的彙報這個錯誤

具體什麼原因我話沒有找到，可能是瀏覽器覺得你的協議或者鏈接不安全怕泄露一些東西然後不讓你下載吧，好啦就醬！