如何使用 Javascript 将图像 URL 转换为 Base64？

将图像 URL 转换为 Base64

在 Web 开发场景中，通常需要发送图像进行处理或存储，而无需访问实际的图像文件。为了实现这一点，我们可以将图像 URL 转换为 Base64 格式，从而实现高效传输。

在您的具体情况下，您拥有图像的 URL（例如，“https://example.com/image.png”）。 png") 从用户的输入中获取。要使用 JavaScript 将其转换为 Base64：

1. 创建一个新图像元素： 此图像元素将用作要处理的图像的临时表示。

<code class="javascript">const img = new Image();
img.src = imageUrl; // Replace imageUrl with the URL you obtained</code>

2. 在画布上绘制图像：此步骤将在画布上创建图像的像素完美副本。

<code class="javascript">const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);</code>

3. 将画布转换为 Base64：使用 toDataURL() 方法将画布转换为 Base64 编码的字符串。

<code class="javascript">const base64Image = canvas.toDataURL("image/png");</code>

4. 删除数据 URI 前缀： toDataURL() 方法返回包含额外信息的数据 URI。使用正则表达式删除前缀即可获得纯 Base64 数据。

<code class="javascript">const regex = /^data:image\/[A-z]*;base64,/;
const base64Data = base64Image.replace(regex, "");</code>

现在，base64Data 包含图像的 Base64 编码表示形式。您可以将此字符串传输到您的网络服务以进行进一步处理或将其保存在您的系统本地。

以上是如何使用 Javascript 将图像 URL 转换为 Base64？的详细内容。更多信息请关注PHP中文网其他相关文章！