canvas,dataURL,Blob,File相互转换

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的数据内容
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        // 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
        n = bstr.length,
        // 创建一个Uint8Array类型的数组以存放二进制数据
        u8arr = new Uint8Array(n)
    // 将二进制数据存入Uint8Array类型的数组中
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return { u8arr, mime }
}