பேஸ்64 படம் குறியாக்கி மற்றும் காட்சி | பேஸ்64 ஐ படங்களில் மாற்றவும்
பேஸ்64 குறியாக்கப்பட்ட படத்தின் சரங்களை உடனடியாக குறியாக்கவும் மற்றும் முன்னோட்டம் காணவும். தவறான உள்ளீடுகளுக்கு தவறுகளை கையாள்வதுடன் JPEG, PNG, GIF மற்றும் பிற பொதுவான வடிவங்களை ஆதரிக்கிறது.
பேஸ்64 படம் குறியாக்கி மற்றும் காட்சியாளர்
ஒரு பேஸ்64 குறியாக்கப்பட்ட படம் சரம் ஒட்டுங்கள் மற்றும் அதை காட்சியிடவும்.
பட முன்னோட்டம்
காட்சியிடுவதற்கான படம் இல்லை. அதை தானாகவே குறியாக்கம் செய்ய ஒரு பேஸ்64 சரத்தை ஒட்டவும்.
JPEG, PNG, GIF மற்றும் பிற பொதுவான பட வடிவங்களை ஆதரிக்கிறது.
குறிப்புகள்
1. மேலே உள்ள உரை பகுதியில் ஒரு பேஸ்64 குறியாக்கப்பட்ட படம் சரத்தை ஒட்டவும்.
2. நீங்கள் எழுதும் போது படம் தானாகவே குறியாக்கப்படும், அல்லது 'படத்தை குறியாக்கம் செய்' பொத்தானை கிளிக் செய்யவும்.
3. குறியாக்கப்பட்ட படம் கீழே உள்ள முன்னோட்ட பகுதியில் தோன்றும்.
குறிப்பு: சிறந்த முடிவுகளுக்கு, சரம் 'data:image/' என்பதுடன் தொடங்க வேண்டும், ஆனால் இந்த முன்னுரை இல்லாமல் உள்ள சரங்களை குறியாக்க முயற்சிக்கும்.
ஆவணங்கள்
Base64 ಚಿತ್ರ ಡಿಕೋಡರ್ ಮತ್ತು ವೀಕ್ಷಕ
ಪರಿಚಯ
Base64是一种二进制到文本的编码方案,它将二进制数据表示为ASCII字符串格式。它通常用于在HTML、CSS、JavaScript、JSON和其他文本基础格式中直接嵌入图像数据,这些格式无法直接包含二进制数据。此工具允许您解码base64编码的图像字符串,并直接在浏览器中查看结果图像。
Base64编码使数据大小比原始二进制数据大约增加33%,但它使图像能够直接包含在基于文本的文档中,而无需单独下载文件。这对于小图像(如图标、徽标或简单图形)特别有用,其中嵌入的便利性超过了大小的增加。
我们的Base64图像解码器工具提供了一个简单的界面,您可以在其中粘贴base64编码的图像字符串,并立即查看解码后的图像。它支持所有常见的图像格式,包括JPEG、PNG、GIF、WebP和SVG,并且可以处理数据URL格式(带有data:image/...
前缀)和原始base64字符串。
技术细节
Base64编码格式
Base64编码将二进制数据转换为一组64个ASCII字符(A-Z、a-z、0-9、+和/),并使用=进行填充。对于Web上的图像,base64数据通常格式化为具有以下结构的数据URL:
1data:[<media type>][;base64],<data>
2
例如,base64编码的PNG图像可能看起来像:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
该格式的组成部分为:
data:
- URL方案image/png
- 数据的MIME类型;base64
- 编码方法,
- 标头和数据之间的分隔符- 实际的base64编码数据
解码过程
在解码base64图像字符串时,会发生以下步骤:
- 解析字符串以确定是否包含数据URL前缀
- 如果存在前缀,则提取MIME类型以确定图像格式
- 隔离base64数据部分并解码为二进制数据
- 将二进制数据转换为Blob或对象URL,以便可以显示为图像
如果输入不包括数据URL前缀,则解码器尝试将其视为原始base64数据,并根据解码的二进制头推断图像类型,或默认为PNG。
支持的图像格式
此工具支持所有常见的Web图像格式:
格式 | MIME类型 | 典型用例 |
---|---|---|
JPEG | image/jpeg | 照片、颜色较多的复杂图像 |
PNG | image/png | 需要透明度的图像、屏幕截图、图形 |
GIF | image/gif | 简单动画、颜色有限的图像 |
WebP | image/webp | 现代格式,压缩效果优于JPEG/PNG |
SVG | image/svg+xml | 矢量图形、可缩放的图标和插图 |
用例
Base64编码的图像在Web开发及其他领域有几个实际应用:
-
在HTML/CSS/JS中嵌入图像:通过直接在代码中包含图像来减少HTTP请求,这可以提高小图像的页面加载时间。
-
电子邮件模板:确保图像在默认阻止外部图像的电子邮件客户端中正确显示。
-
单文件应用程序:创建自包含的HTML应用程序,所有资源都嵌入在一个文件中。
-
API响应:在JSON响应中直接包含图像数据,而无需单独的图像端点。
-
CSS中的数据URI:直接在CSS文件中嵌入小图标和背景图像。
-
画布操作:便于保存和传输画布图像数据。
-
离线应用程序:将图像作为文本字符串存储在localStorage或IndexedDB中。
性能考虑
虽然base64编码提供了便利性,但也带来了权衡:
- 文件大小增加:Base64编码使数据大小大约增加33%。
- 无法浏览器缓存:嵌入的图像无法像外部图像文件那样单独缓存。
- 解析开销:浏览器必须在呈现之前解码base64字符串。
- 维护挑战:嵌入的图像比引用的文件更难更新。
为了获得最佳性能,通常建议仅对小图像(小于10KB)进行base64编码。较大的图像通常更适合作为单独的文件提供,这样可以正确缓存和优化。
替代方案
针对不同用例,存在几种替代base64编码的方法:
-
SVG内联嵌入:对于矢量图形,内联SVG通常提供比base64编码的SVG更好的性能和灵活性。
-
WebP和现代图像格式:这些格式提供比base64编码的JPEG/PNG更好的压缩效果。
-
图像精灵:将多个小图像合并到一个文件中,并使用CSS定位。
-
CDN(内容分发网络):对于生产网站,从CDN提供优化图像通常更有效。
-
数据压缩:对于传输大量二进制数据,专门的压缩算法(如gzip或Brotli)比base64更有效。
代码示例
以下是在各种编程语言中处理base64编码图像的示例:
1// 在JavaScript(浏览器)中将图像转换为base64
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // 以数据URL(base64字符串)获取
11 return canvas.toDataURL('image/png');
12}
13
14// 显示base64图像
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // 处理没有数据URL前缀的字符串
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
26
1import base64
2from PIL import Image
3from io import BytesIO
4
5# 将图像文件转换为base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# 将base64转换为图像并保存
12def base64_to_image(base64_string, output_path):
13 # 如果存在数据URL前缀,则移除
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# 示例用法
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # 打印字符串的开始部分
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// 在PHP中将图像文件转换为base64
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// 将base64转换为图像并保存
10function base64ToImage($base64String, $outputPath) {
11 // 提取base64编码的二进制数据
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // 解码并保存
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// 示例用法
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // 打印字符串的开始部分
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26
1import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // 将图像文件转换为base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // 将base64转换为图像并保存
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // 如果存在数据URL前缀,则移除
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // 打印字符串的开始部分
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
40
1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // 将图像文件转换为base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // 将base64转换为图像并保存
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // 如果存在数据URL前缀,则移除
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // 打印字符串的开始部分
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# 将图像文件转换为base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# 将base64转换为图像并保存
11def base64_to_image(base64_string, output_path)
12 # 如果存在数据URL前缀,则移除
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# 示例用法
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # 打印字符串的开始部分
25
26base64_to_image(base64_image, 'output.jpg')
27
1' Excel VBA函数将文件编码为base64
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' 在Excel中使用:
27' =FileToBase64("C:\path\to\image.jpg")
28
HTML实现
以下是如何在HTML中直接嵌入base64图像:
1<!-- 直接在HTML中嵌入base64图像 -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64编码的图像">
3
4<!-- 使用CSS与base64背景图像 -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13
历史
Base64编码起源于1970年代电子邮件系统的发展。它旨在解决通过仅设计为处理ASCII文本的系统传输二进制数据的问题。
该编码方案于1987年通过RFC 989的发布而正式化,该标准定义了隐私增强邮件(PEM)标准。此后在RFC 1421和其他相关标准中进行了更新。“base64”这个术语本身源于该编码使用64个不同的ASCII字符来表示二进制数据。
在Web开发的背景下,base64编码图像在2000年代中期变得越来越流行,开发人员寻求减少HTTP请求并提高页面加载时间的方式。该技术在移动Web开发的兴起期间得到了特别的青睐,因为在较慢的移动连接上优化请求至关重要。
今天,base64编码仍然是Web开发中的一个重要工具,尽管随着最佳实践的发展,它的使用变得更加有针对性。现代方法通常仅对小型关键图像使用base64编码,同时利用HTTP/2等更有效的交付方法处理较大的资产。
参考文献
பின்னூட்டம்
இந்த கருவி பற்றி பின்னூட்டம் அளிக்க தொடங்க பின்னூட்டத்தை கிளிக் செய்யவும்
சம்பந்தப்பட்ட கருவிகள்
உங்கள் வேலைப்பாட்டுக்கு பயனுள்ளதாக இருக்கக்கூடிய மேலும் கருவிகளை கண்டறியவும்