图片及文件相关操作

图片地址、Base64、Blog、File 互相转换

图片地址转 Base64

function getBase64FromImageURL(url, callback) {
    let canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.crossOrigin = 'Anonymous'
    img.onload = function () {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0)
        const base64URL = canvas.toDataURL('image/png')
        callback(base64URL)
        canvas = null
    }
    img.src = url
}

const testUrl = '/img/lavender.jpg'
getBase64FromImageURL(testUrl, base64URL => {
    console.log('base64URL', base64URL)
})

Base64 转 Blob

function base64ToBlob(base64) {
    let arr = base64.split(',')
    let mime = arr[0].match(/:(.*?);/)[1] || type
    let bytes = window.atob(arr[1])
    let n = new ArrayBuffer(bytes.length)
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bytes.charCodeAt(n)
    }
    return new Blob([u8arr], {type: mime})
}

// 测试
const blob = base64ToBlob(base64)
console.log('blob', blob)

Base64 转 File

function getFileFromBase64(base64URL, filename = 'FileName') {
    const arr = base64URL.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {type: mime})
}

const file = getFileFromBase64(base64URL, 'test.jpg')
console.log('file', file)

Blob 转 Base64

function blobToBase64(blob, callback) {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = e => {
        const base64 = e.target.result
        callback(base64)
    }
}

// 测试
blobToBase64(blob, base64 => {
    console.log('base64', base64)
})

Blob 转 File

// Blob 转换为 File
function blobToFile(blob, fileName) {
    const file = new File([blob], fileName, {type: blob.type})
    return file
}

// 测试
const file = blobToFile(blob, 'FileName');
console.log(file);

File 转 Base64

function fileToBase64(file, callback) {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function (e) {
        const base64 = e.target.result
        callback(base64)
    }
}

// 测试
fileToBase64(_file, base64 => {
    console.log('base64', base64)
})

File 转 Blob

// File 转换为 Blob
function fileToBlob(file, callback) {
    const type = file.type
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function (e) {
        const blob = new Blob([e.target.result], {type})
        callback(blob)
    }
}

// 测试
const _file = document.getElementById('file').files[0]
fileToBlob(_file, blob => {
    console.log('blob', blob)
})

File 预览

function getFileUrl(file) {
    let url
    const agent = navigator.userAgent
    if (agent.indexOf('MSIE') >= 1 || agent.indexOf('NET') != -1) {
        url = window.URL.createObjectURL(file)
    } else if (agent.indexOf('Firefox') > 0) {
        url = window.URL.createObjectURL(file)
    } else if (agent.indexOf('Chrome') > 0) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
}

// 测试
function getBlobByFile() {
    const file = document.getElementById('file').files[0]
    const url = getFileUrl(file)
    const imgEl = new Image()
    imgEl.src = url
    imgEl.onload = function () {
        document.getElementById('img').src = url
        URL.revokeObjectURL(url)
    }
}

---

参考文章

• 图片格式转换（File、Blob、base64）