<img src="data:image/jpeg;base64,UklGRlxFAABXRUJQVlA4IFBFAABQ0QGdASogA/QBPpFEnUulo7Mso9DKMmASCWct5uL8qDTbQqPpCo8vlZ8v7veBKd+4QPRGtO5vqnngcmAC+Qve9OInjb9Xcd3zn3zNoLDPXh/lX/z> 怎么拿到src中的内容,并转换为链接
时间: 2023-12-25 10:06:52 浏览: 160
这是一个base64编码的图片,可以通过JavaScript中的`atob`函数将其转换为二进制数据,再将其转换为Blob对象,最后使用URL.createObjectURL方法生成对象URL,即可得到图片的链接。
以下是具体实现方法:
```javascript
// 获取img标签中的base64编码字符串
const base64Str = 'UklGRlxFAABXRUJQVlA4IFBFAABQ0QGdASogA/QBPpFEnUulo7Mso9DKMmASCWct5uL8qDTbQqPpCo8vlZ8v7veBKd+4QPRGtO5vqnngcmAC+Qve9OInjb9Xcd3zn3zNoLDPXh/lX/z';
// 将base64编码字符串转换为二进制数据
const binaryStr = atob(base64Str);
// 将二进制数据转换为Blob对象
const blob = new Blob([new Uint8Array(binaryStr.length).map((_, i) => binaryStr.charCodeAt(i))], { type: 'image/jpeg' });
// 生成对象URL
const imgUrl = URL.createObjectURL(blob);
console.log(imgUrl); // 输出图片的链接
```
这样就可以获取到base64编码图片的链接了。需要注意的是,每次使用完对象URL后,需要及时调用URL.revokeObjectURL方法释放资源。
相关问题
<img src="data:image/jpeg;base64,UklGRlxFAABXRUJQVlA4IFBFAABQ0QGdASogA/QBPpFEnUulo7Mso9DKMmASCWct5uL8qDTbQqPpCo8vlZ8v7veBKd+4QPRGtO5vqnngcmAC+Qve9OInjb9Xcd3zn3zNoLDPXh/lX/z> 怎么拿到src中的内容
这个img标签的src属性中存储了一张图片的Base64编码字符串,如果想要获取这个字符串,可以使用JavaScript中的正则表达式来提取。
以下是具体实现方法:
```javascript
// 获取img标签中的Base64编码字符串
const base64Str = 'UklGRlxFAABXRUJQVlA4IFBFAABQ0QGdASogA/QBPpFEnUulo7Mso9DKMmASCWct5uL8qDTbQqPpCo8vlZ8v7veBKd+4QPRGtO5vqnngcmAC+Qve9OInjb9Xcd3zn3zNoLDPXh/lX/z';
const regex = /^data:(.*?);base64,(.*)$/;
const result = regex.exec(base64Str);
if (result) {
const mimeType = result[1]; // 图片的MIME类型
const content = result[2]; // 图片的Base64编码字符串
console.log(mimeType); // 输出图片的MIME类型
console.log(content); // 输出图片的Base64编码字符串
} else {
console.log('无效的Base64编码字符串');
}
```
这样就可以获取到img标签中的Base64编码字符串了。需要注意的是,Base64编码字符串的格式通常为"data:MIME类型;base64,Base64编码内容",所以可以使用正则表达式来提取其中的MIME类型和Base64编码内容。
阅读全文