如何使用 Vue.js 下载图像而不显示它们？

Question

在我的 Vue.js 应用程序中，我希望强制浏览器在单击按钮时下载图像 _而不显示它_。

按照 这个 答案，我想出了这个解决方案：

 <span @click="downloadImg(remoteURL)">
        Download Image
</span>

和方法：

 downloadImg(url) {
    console.log('downloading', url);
    document.execCommand('SaveAs',true, url);
    },

remoteURL 实际上是一个生成 url 的小函数，如下所示：

   remoteURL(link) {
       return this.BASE_URL+ link  //link is the image's path fetched from database
  },

但是，当我单击 Download Image 时，什么也没有发生。

这个问题 不相关，因为我不想只是 Download image with JavaScript 。我想要的是 安静地 下载图像，即不显示图像。

我该如何解决？

原文由 qliq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我基于 blob 创建了一个解决方案。首先，我使用图像 url 创建了一个 blob 。加载图像 blob 后，我调用了从 FileSaver 中提取的 saveAs 方法来安静地拥有 blob。

 let vm = new Vue({
  el: '#vue-instance',
  data: {
    link: 'https://i.imgur.com/lF1GKDt.jpg',
  },
  created() {
    this.remoteURL();
  },
  methods: {
    downloadImg() {
      let url = this.remoteURL();
      fetch(url)
        .then((response) => response.blob())
        .then((blob) => {
          saveAs(blob, 'image_name.jpg');
        });
      console.log('downloading', url);
    },
    remoteURL() {
      //return this.BASE_URL + link //link is the image's path fetched from database
      return this.link;
    },
  }
});

var _global = typeof window === 'object' && window.window === window ?
  window : typeof self === 'object' && self.self === self ?
  self : typeof global === 'object' && global.global === global ?
  global :
  this

function bom(blob, opts) {
  if (typeof opts === 'undefined') opts = {
    autoBom: false
  }
  else if (typeof opts !== 'object') {
    console.warn('Deprecated: Expected third argument to be a object')
    opts = {
      autoBom: !opts
    }
  }

  // prepend BOM for UTF-8 XML and text/* types (including HTML)
  // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
  if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
    return new Blob([String.fromCharCode(0xFEFF), blob], {
      type: blob.type
    })
  }
  return blob
}

function download(url, name, opts) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = function() {
    saveAs(xhr.response, name, opts)
  }
  xhr.onerror = function() {
    console.error('could not download file')
  }
  xhr.send()
}

function corsEnabled(url) {
  var xhr = new XMLHttpRequest()
  // use sync to avoid popup blocker
  xhr.open('HEAD', url, false)
  xhr.send()
  return xhr.status >= 200 && xhr.status <= 299
}

// `a.click()` doesn't work for all browsers (#465)
function click(node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
      20, false, false, false, false, 0, null)
    node.dispatchEvent(evt)
  }
}

var saveAs = _global.saveAs || (
  // probably in some web worker
  (typeof window !== 'object' || window !== _global) ?
  function saveAs() { /* noop */ }

  // Use download attribute first if possible (#193 Lumia mobile)
  :
  'download' in HTMLAnchorElement.prototype ?
  function saveAs(blob, name, opts) {
    var URL = _global.URL || _global.webkitURL
    var a = document.createElement('a')
    name = name || blob.name || 'download'

    a.download = name
    a.rel = 'noopener' // tabnabbing

    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob
      if (a.origin !== location.origin) {
        corsEnabled(a.href) ?
          download(blob, name, opts) :
          click(a, a.target = '_blank')
      } else {
        click(a)
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob)
      setTimeout(function() {
        URL.revokeObjectURL(a.href)
      }, 4E4) // 40s
      setTimeout(function() {
        click(a)
      }, 0)
    }
  }

  // Use msSaveOrOpenBlob as a second approach
  :
  'msSaveOrOpenBlob' in navigator ?
  function saveAs(blob, name, opts) {
    name = name || blob.name || 'download'

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts)
      } else {
        var a = document.createElement('a')
        a.href = blob
        a.target = '_blank'
        setTimeout(function() {
          click(a)
        })
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name)
    }
  }

  // Fallback to using FileReader and a popup
  :
  function saveAs(blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank')
    if (popup) {
      popup.document.title =
        popup.document.body.innerText = 'downloading...'
    }

    if (typeof blob === 'string') return download(blob, name, opts)

    var force = blob.type === 'application/octet-stream'
    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)

    if ((isChromeIOS || (force && isSafari)) && typeof FileReader === 'object') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader()
      reader.onloadend = function() {
        var url = reader.result
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
        if (popup) popup.location.href = url
        else location = url
        popup = null // reverse-tabnabbing #460
      }
      reader.readAsDataURL(blob)
    } else {
      var URL = _global.URL || _global.webkitURL
      var url = URL.createObjectURL(blob)
      if (popup) popup.location = url
      else location.href = url
      popup = null // reverse-tabnabbing #460
      setTimeout(function() {
        URL.revokeObjectURL(url)
      }, 4E4) // 40s
    }
  }
)

_global.saveAs = saveAs.saveAs = saveAs

if (typeof module !== 'undefined') {
  module.exports = saveAs;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
  <span @click="downloadImg()">Download Image</span>
</div>

更新：

我删除了 jQuery 和 FileSaver 并改编了一个普通版本。

原文由 Teocci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我用过 Axios

 import axios from "axios";

---

 async downloadImage(url) {
  var base64 = await axios
    .get(url, {
      responseType: "arraybuffer"
    })
    .then(response =>
      Buffer.from(response.data, "binary").toString("base64")
    );
  var img = new Image();
  img.src = "data:image/jpeg;base64, " + base64;
  return img;
},

---

 var img = await this.downloadImage("https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png");
console.log(img.width);

原文由 F_SO_K 发布，翻译遵循 CC BY-SA 4.0 许可协议