图片被写成js怎么转

图片被写成JS的转化方法：使用正则表达式解析数据URI、解码Base64字符串、重建图片数据

在现代网络开发中，有时我们会遇到将图片以JavaScript字符串形式嵌入代码中的情况。主要方法包括使用正则表达式解析数据URI、解码Base64字符串、重建图片数据。下面将详细描述如何进行这些操作。

一、使用正则表达式解析数据URI

数据URI是一种将文件内容嵌入网页的方法，通过Base64编码的方式将图片数据嵌入到HTML或JavaScript中。我们可以使用正则表达式从JavaScript代码中提取这些数据URI。

1、什么是数据URI

数据URI的基本格式为：data:[<mediatype>][;base64],<data>

示例：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

2、使用正则表达式提取数据URI

我们可以编写正则表达式来匹配数据URI，并提取其中的Base64编码数据。

const dataURIRegex = /data:image/([a-zA-Z]*);base64,([^"]*)/;
const jsCode = 'const imgSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...";';
const matches = jsCode.match(dataURIRegex);
if (matches) {
    const base64Data = matches[2];
    console.log('Extracted Base64 Data:', base64Data);
}

二、解码Base64字符串

Base64是一种用于将二进制数据转化为ASCII字符串的编码方法。我们需要将Base64编码的数据解码回原始的二进制数据。

1、使用JavaScript解码Base64

JavaScript提供了atob函数，可以将Base64字符串解码为原始的二进制数据。

const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUA...';
const binaryData = atob(base64Data);
console.log('Decoded Binary Data:', binaryData);

2、将二进制数据转换为字节数组

为了进一步处理图片数据，我们通常会将二进制数据转换为字节数组。

const byteArray = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
    byteArray[i] = binaryData.charCodeAt(i);
}
console.log('Byte Array:', byteArray);

三、重建图片数据

解码Base64数据后，我们需要将其重建为图片文件或用于显示的图片对象。

1、创建Blob对象

我们可以使用解码后的字节数组创建一个Blob对象，以表示图片文件。

const blob = new Blob([byteArray], { type: 'image/png' });

2、生成图片URL

通过Blob对象，我们可以生成一个可以用于<img>标签的URL。

const imageUrl = URL.createObjectURL(blob);
console.log('Image URL:', imageUrl);

3、将图片显示在网页上

最后，我们可以使用生成的URL将图片显示在网页上。

const img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);

四、应用实例

为了更好地理解上述步骤，下面是一个完整的示例，展示如何将JavaScript中的Base64编码图片数据转化为并显示图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Decoder</title>
</head>
<body>
    <script>
        const jsCode = 'const imgSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...";';
        const dataURIRegex = /data:image/([a-zA-Z]*);base64,([^"]*)/;
        const matches = jsCode.match(dataURIRegex);
        if (matches) {
            const base64Data = matches[2];
            const binaryData = atob(base64Data);
            const byteArray = new Uint8Array(binaryData.length);
            for (let i = 0; i < binaryData.length; i++) {
                byteArray[i] = binaryData.charCodeAt(i);
            }
            const blob = new Blob([byteArray], { type: 'image/png' });
            const imageUrl = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = imageUrl;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

通过上述步骤和示例代码，我们可以成功将嵌入在JavaScript代码中的Base64编码图片数据转换为可显示的图片。这个过程主要包括提取数据URI、解码Base64数据、重建图片数据，这些都是实现图片显示的关键步骤。