如今，为了提高用户的浏览体验，网站中使用的图片越来越多，这些图片通常以Base64的形式存储和加载。下面这篇文章主要介绍JavaScript图片的Base64编码和转换的相关信息，有需要的可以参考一下。
目录
Base64图片的Base64编码是什么？Base64图片的代码不是一个完美的总结。
什么是 Base64
Base64是网络中存储和传输的二进制数据的常见用法。Base64的一个字节只能表示64种情况，编码格式每个字节的前两位只能是0，剩下的6位用来表示内容。
Base64首先应用于邮件传输协议。当时的邮件传输协议只支持ASCII字符传输，用ASCII码表示所有英文字符。但是如果要传输文件中的图片、视频等资源，这些资源转换成ASCII码时会出现非英文数字。而且邮件里有很多控制字符，会变成隐形字符。而且非英文字符和控制字符在传输过程中容易出错，会影响邮件的正确传输。为此，一种新的编码规则诞生了：
二进制按3个字节分组，然后每组的3个字节(24位)转换成4个6位，每6位根据查找表对应一个ASCII符号。
图片的 Base64 编码
我们都知道图片通常以img标签的形式在网页中使用，img标签的src属性会指定一个远程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的。，而我们常说的Base64存储显示使用了数据URL技术。
选择数据URL技术的优点是：
减少HTTP请求；避免跨域问题；它可以作为一个单独的图片或与CSS精灵结合使用。
Data URL:
Data URLs，即以data: protocol为前缀的URL，允许内容创建者在文档中嵌入小文件。
数据URL由四部分组成：前缀(数据：)、指示数据类型的MIME类型、可选的base64标记(如果不是文本)、数据本身：
数据：[media type][；base64]，数据
图片转 Base64 的代码
前端程序员把图片变成Base64代码的场景还是很多的，网上搜索的很多方法都用不上。下面给大家介绍两个绝对好用的~
Promise 实现
/**
* @param url图像路径
*/
导出函数getUrlBase64(url) {
返回新承诺((解决，拒绝)={
let canvas=document . createelement(' canvas ')；
const CTX=canvas . get context(' 2d ')；
设img=new Image()；
img.crossOrigin=' Anonymous//解决Canvas.toDataURL图片的跨域问题
img.src=url
img.onload=function () {
canvas . height=img . height；
画布.宽度=img .宽度；
ctx.drawImage(img，0，0，img.width，img . height)；//参数可以自定义
const data URL=canvas . toda taurl(' image/JPEG '，1)；//获取Base64编码
resolve(dataURL)；
canvas=null//清除画布元素
img=null//清除img元素
};
img.onerror=function () {
拒绝(新错误('无法在' url '加载图像))；
};
});
}
回调函数实现
/**
* @param url图像路径
* @param回调结果回调
*/
导出函数getUrlBase64Callback(url，callback) {
let canvas=document . createelement(' canvas ')；//创建画布DOM元素
const CTX=canvas . get context(' 2d ')；
const img=new Image()；
img.crossOrigin=' Anonymous
img.src=url
img.onload=function () {
canvas . height=img . height；
画布.宽度=img .宽度；
ctx.drawImage(img，0，0，img.width，img . height)；
const data URL=canvas . toda taurl(' image/JPEG '，1)；//可以选择多种模式。
callback.call(this，dataURL)；//返回函数以获取Base64编码
canvas=null
};
}
Base64 图片编码并不完美
我不是故意找茬的。
Base64编码的数据量通常是原始数据的4/3，即数据URL形式的图像会比二进制格式的图像大1/3。URL形式的图片不会被浏览器缓存，通常编码后的内容会包含在CSS和JS文件中被浏览器缓存。虽然加载网页图片不需要访问服务器，但是由于base64格式的内容太多，加载网页的速度会降低，可能会影响用户体验。base64格式的文本很多，存储在数据库中增加了数据库服务器的压力(说出在数据库中保存base64格式大图的同学)，页面解析生成CSSOM的时间增加。CSSOM stage阻止任何东西被呈现，这意味着在CSS被处理之前，任何东西都不会被显示。如果在CSS文件中混入Base64，由于文件大小的大幅增加，解析时间会增加到十倍以上。
参考文章：
【前端攻略】:玩图片的Base64编码
Base64编码知识，每篇文章！
将图片转换为base64格式的优点和缺点
总结
关于JavaScript图像的Base64编码和转换的文章到此结束。有关JS图像转换的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。