首页 > web前端 > js教程 > 如何在 Javascript 中将图像 URL 转换为 Base64?

如何在 Javascript 中将图像 URL 转换为 Base64?

Susan Sarandon
发布: 2024-10-31 06:22:30
原创
251 人浏览过

How to Convert an Image URL to Base64 in Javascript?

如何将图像 URL 转换为 Base64

您从图像输入中获得了一个图像 URL,需要将其转换为 Base64,以便您可以将其发送到网络服务并在本地保存图像。您当前使用的代码不会将 URL 转换为 Base64。

要实现此目的,您可以使用以下步骤:

  1. 创建一个 JavaScript 函数来将图像转换为 Base64:
<code class="javascript">function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/?[A-z]*;base64,/);
}</code>
登录后复制

此函数将图像元素 (img) 作为输入并返回 Base64 编码的字符串。

  1. 从 HTML 中获取图像元素:
<code class="html"><img id="imageid" src="https://www.google.de/images/srpr/logo11w.png"></code>
登录后复制
  1. 使用 getBase64Image() 函数将图像转换为 Base64:
<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>
登录后复制

这会将图像转换为 Base64 并将结果存储在 Base64 变量中。然后,您可以将 base64 变量发送到您的 Web 服务以在本地保存图像。

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板