1、圖片轉(zhuǎn)base64

function getBase64Image(img) {
    var canvas = document.createElement("canvas")
    canvas.width = img.width
    canvas.height = img.height
    var ctx = canvas.getContext("2d")
    ctx.drawImage(img, 0, 0, img.width, img.height)
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
    var dataURL = canvas.toDataURL("image/" + ext)

    return dataURL;
}

2、base64轉(zhuǎn)文件流

function btof(data, fileName) {
    const dataArr = data.split(",")
    const byteString = atob(dataArr[1])

    const options = {
        type: "image/jpeg",
        endings: "native"
    }
    const u8Arr = new Uint8Array(byteString.length)
    for (let i = 0; i < byteString.length; i++) {
        u8Arr[i] = byteString.charCodeAt(i)
    }
    return new File([u8Arr], fileName + ".jpg", options);
}

3、下載圖片

const handleImgDownload = (imgsrc, name) => {
  const image = new Image();
  // 解決跨域 Canvas 污染問(wèn)題
  image.setAttribute('crossOrigin', 'anonymous');
  image.onload = function () {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    const url = canvas.toDataURL('image/png'); //得到圖片的base64編碼數(shù)據(jù)
    const a = document.createElement('a'); // 生成一個(gè)a元素
    const event = new MouseEvent('click'); // 創(chuàng)建一個(gè)單擊事件
    a.download = name || 'photo'; // 設(shè)置圖片名稱(chēng)
    a.href = url; // 將生成的URL設(shè)置為a.href屬性
    a.dispatchEvent(event); // 觸發(fā)a的單擊事件
  };
  // 在加載的圖片地址上加一個(gè)時(shí)間戳，地址不一樣，瀏覽器就會(huì)重新請(qǐng)求新的資源，就不會(huì)用緩存的
  image.src = imgsrc + '?time=' + new Date().getTime();
};