1、canvas轉圖片保存,兼容IE10+

/**
 * canvas轉圖片保存,兼容IE10+
 * @param {canvas} canvas canvas對象
 * @param {string} imgName 保存的圖片名
 */
export const canvasToImg = (canvas, imgName) => {
    const url = canvas.toDataURL('image/png')
    // 針對IE
    if (window.navigator.msSaveBlob) {
        return window.navigator.msSaveBlob(new Blob([getUint8Arr(url).u8arr]), `${imgName}.png`)
    }
    const a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', `${imgName}.png`)
    const evt = document.createEvent('MouseEvents')
    evt.initEvent('click', true, true)
    a.dispatchEvent(evt)
}

2、canvas轉dataURL

/**
 * canvas轉dataURL
 * @param {canvas} canvas
 */
export const convertCanvasToImage = canvas => {
    // let image = new Image()
    // image.src = canvas.toDataURL('image/png')
    return canvas.toDataURL('image/png')
}

3瘸味、dataURL轉Blob對象

/**
 * dataURL轉Blob對象
 * @param {String} dataurl
 */
export const dataURLtoBlob = dataurl => {
    let uint8 = getUint8Arr(dataurl)
    return new Blob([uint8.u8arr], { type: uint8.mime })
}

4浓利、Blob轉換為File

/**
 * Blob轉換為File
 * @param {Blob} theBlob
 * @param {String} fileName
 */
export const blobToFile = (theBlob, fileName) => {
    theBlob.lastModifiedDate = new Date()
    theBlob.name = fileName
    return theBlob
}

5挤庇、dataURL轉File對象

/**
 * dataURL轉File對象
 * @param {String} dataurl
 * @param {String} filename
 */
export const dataURLtoFile = (dataurl, filename) => {//將base64轉換為文件
    let uint8 = getUint8Arr(dataurl)
    return new File([uint8.u8arr], filename, { type: uint8.mime })
}

★二進制容器

/**
 * 二進制容器
 * @param {String} dataurl
 */
const getUint8Arr = dataurl => {
    // 截取base64的數(shù)據(jù)內容
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        // 獲取解碼后的二進制數(shù)據(jù)的長度钞速，用于后面創(chuàng)建二進制數(shù)據(jù)容器
        n = bstr.length,
        // 創(chuàng)建一個Uint8Array類型的數(shù)組以存放二進制數(shù)據(jù)
        u8arr = new Uint8Array(n)
    // 將二進制數(shù)據(jù)存入Uint8Array類型的數(shù)組中
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return { u8arr, mime }
}