JavaScript图片的Base64编码以及转换详解

什么是 Base64

Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。

Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。而且，非英文字符和控制字符在传输过程中很容易产生错误，影响邮件的正确传输。为此才有了诞生了一个新的编码规则：

把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位根据查表对应一个 ASCII 符号。

图片的 Base64 编码

我们都知道图片在网页中的使用方法通常是使用 img 标签的形式，而 img 标签的 src 属性会指定一个远程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的。 而我们经常所说的 Base64 存储展示，则是使用了Data URL 技术。

我们选择 Data URL 技术优势在于：

• 减少 Http 请求；
• 避免跨域问题；
• 可像单独图片一样使用，也可以结合CSS Sprites（雪碧图）使用

Data URL:

Data URLs，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。

Data URLs 由四个部分组成：前缀 (data:)、指示数据类型的 MIME 类型、如果非文本则为可选的base64标记、数据本身：

data:[<mediatype>][;base64],<data>

图片转 Base64 的代码 

由前端程序员来将图片转为 Base64 编码的场景还是非常多的，而且网上搜索的方法好多都没法用?，这边给大家两个绝对可以用的哈~

Promise 实现

export function getUrlBase64(url) {
    return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //解决Canvas.toDataURL 图片跨域问题
        img.src = url;
        img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
            const dataURL = canvas.toDataURL("image/jpeg", 1); //获取Base64编码
            resolve(dataURL);
            canvas = null; //清除canvas元素
            img = null; //清除img元素
        };
        img.onerror = function () {
            reject(new Error("Could not load image at " + url));
        };
    });
}

回调函数实现

export function getUrlBase64Callback(url, callback) {
    let canvas = document.createElement("canvas"); //创建canvas DOM元素
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = url;
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        const dataURL = canvas.toDataURL("image/jpeg", 1); //可选取多种模式
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
    };
}

Base64 图片编码并不完美

我不是故意找茬

• Base64 编码的数据体积通常是原数据的体积 4/3，也就是 Data URL 形式的图片会比二进制格式的图片体积大 1/3。
• Data URL 形式的图片不会被浏览器缓存，通常编码内容会包含在CSS，js文件当中以此被浏览器缓存。
• 网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
• base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力（点名一下把大图片转base64格式存到数据库的同学?）
• 页面解析 CSS 生成的 CSSOM 时间增加。CSSOM 阶段阻止任何东西渲染，这意味着在 CSS 没处理好之前所有东西都不会展示，而如果CSS文件中混入了Base64，那么因为文件体积的大幅增长，解析时间会增长到十倍以上。

参考文章：

【前端攻略】：玩转图片Base64编码

Base64 编码知识，一文打尽！

图片转换成base64格式的优缺点

总结

到此这篇关于javascript图片的Base64编码以及转换的文章就介绍到这了,更多相关JS图片Base64编码转换内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！