點擊按鈕實現圖片下載


在做項目的時候,會遇到很多下載的功能,有時候我們點擊按鈕或者圖片就在瀏覽器新打開一個tab預覽或者右鍵才能保存,當前需求是點擊按鈕實現圖片的自動下載。

原生js實現:

  /**
   * name: 圖片下載后的名字
   * url:圖片的地址
   */ 
  function downLoadImg(name, url) {
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = function () {
      var canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, image.width, image.height);
      var url = canvas.toDataURL('image/png');
      var a = document.createElement('a');
      a.download = name;
      a.href = url;
      a.click();
    };
    image.src = url;
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM