有沒有小夥伴在開發“純前端下載圖片”功能時，遇到以下的場景？

1. 下載已存在的圖片
2. 下載某個元素的內容

分享解決以上問題的方法

• 下載已存在的圖片：使用canvas畫圖，a標籤下載

export function downloadImg(imgUrl: string, imgTitle: string) {
  var img = new Image();
  img.src = imgUrl;
  // 必須設置，否則canvas中的內容無法轉換為blob
  img.setAttribute('crossOrigin', 'Anonymous');
  img.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx: any = canvas.getContext('2d');
    // 將img中的內容畫到畫布上
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 將畫布內容轉換為Blob
    canvas.toBlob(blob => {
      // blob轉為同源url
      var blobUrl = window.URL.createObjectURL(blob);
      // 創建a鏈接
      var a = document.createElement('a');
      a.href = blobUrl;
      a.download = imgTitle || '下載圖片'; // 設置圖片名稱
      // 觸發a鏈接點擊事件，瀏覽器開始下載文件
      a.click();
    });
  };
}

• 下載某個元素的內容：使用html2canvas插件進行截圖，a標籤下載
  官網：http://html2canvas.hertzen.com/

  // 引入html2canvas
  import html2canvas from 'html2canvas';
  
  // 下載憑證按鈕
  const downLoadBtn = () => {
    // 獲取dom節點
    const downLoadDom: any = document.getElementById("downLoadDom");
    html2canvas(downLoadDom, {
      width: downLoadDom.offsetWidth,
      height: downLoadDom.offsetHeight,
      scale: 2,
    }).then((canvas) => {
      const imgBase64 = canvas.toDataURL('image/png');
      downLoadMethod(imgBase64);
    });
  }
  
  // 下載圖片
  const downLoadMethod = (url: any) => {
    var oA = document.createElement("a");
    oA.download = '下載圖片';
    oA.href = url;
    oA.className = "downLoad"
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
  }

注意📢

• html2canvas圖片跨域問題，可參考文檔
  https://blog.csdn.net/qq_3890...
  

附送

• 將base64圖片轉化為formData並上傳方法

  // 將base64圖片轉化為formData並上傳
  export async function transferBase64ToImg(base64String: any) {
    var bytes = window.atob(base64String.split(',')[1]);
    var array = [];
    for (var i = 0; i < bytes.length; i++) {
      array.push(bytes.charCodeAt(i));
    }
    var blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
    var formData = new FormData();
    formData.append('file', blob, Date.now() + '.jpg');
    let res = await API.edit.uploadImage(formData);
    return res.fullPath;
  }