img标签 加载的网络图片 怎么把他的base64码值弄出来
时间: 2024-09-29 18:06:24 浏览: 46
如果你有一个HTML的`<img>`标签加载了网络图片,并想要获取其对应的Base64编码,可以使用JavaScript来访问并解析图片元素的内容。以下是一个简单的示例:
```javascript
// 获取图片元素
const imgElement = document.querySelector("img");
// 图片已经加载完成时获取Base64
if (imgElement.complete) {
// 使用DataURL属性获取Base64编码
const dataUrl = imgElement.src;
if (dataUrl.startsWith("data:image")) {
// 提取Base64编码部分
const base64String = dataUrl.substring(dataUrl.indexOf(",") + 1);
console.log(base64String);
} else {
console.log("Image is not a Base64-encoded format.");
}
} else {
// 图片尚未加载完毕,添加一个onload事件监听
imgElement.addEventListener("load", function() {
// 此时再尝试提取Base64编码
// ...
});
}
```
这段代码会在图片完全加载完成后检查`src`属性,如果是Base64数据格式,它将从字符串中提取出Base64编码。
阅读全文
相关推荐















