图片及文件相关操作

图片地址、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

// 获取任何图像
let img = document.querySelector('img');

// 生成同尺寸的 <canvas>
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// 向其中复制图像（此方法允许剪裁图像）
context.drawImage(img, 0, 0);
// 可以进行一些操作，比如旋转 context.rotate()，并在 canvas 上做很多其他事情

// toBlob 是异步操作，结束后会调用 callback
canvas.toBlob(function(blob) {
  // blob 创建完成，下载它
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
  URL.revokeObjectURL(link.href);
}, 'image/png');

// async/await 方式
// let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

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);

Blob 用作 URL

• URL.createObjectURL(blob)： 生成的 URL 存储了一个 URL → Blob 映射。因此，此类 URL 很短，但可以访问 Blob
  • 生成样式：blob:http://localhost/3c532c62-832b-4023-9a56-5d8ff17bf805
• URL.revokeObjectURL(url)：从内部映射中移除引用，因此允许 Blob 被删除（如果没有其他引用的话），并释放内存
• 如果介意内存，我们需要撤销（revoke）它们
• 直接访问 Blob，无需“编码/解码”

let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);

Blob 转 Stream

【相关文档】

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）