js将图片流blob转为base64
时间: 2023-11-12 20:04:06 浏览: 69
可以使用FileReader对象将图片流blob转为base64。具体代码如下:
```javascript
function blobToBase64(blob, callback) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
}
```
其中,参数blob为图片流,callback为转换完成后的回调函数。调用示例:
```javascript
var blob = new Blob([uint8Array], {type: 'image/jpeg'});
blobToBase64(blob, function(base64) {
console.log(base64);
});
```
相关问题
使用js将音频blob对象转为base64字符串
可以使用FileReader对象读取音频blob对象,然后使用btoa()方法将读取的内容转换为base64字符串。以下是示例代码:
```javascript
// 假设已经有一个名为audioBlob的音频blob对象
const reader = new FileReader();
reader.readAsDataURL(audioBlob);
reader.onloadend = function() {
const base64String = btoa(reader.result);
console.log(base64String);
}
```
这里使用了FileReader对象的readAsDataURL()方法将音频blob对象读取为Data URI格式的字符串,然后使用btoa()方法将Data URI转换为base64字符串。最后将转换后的字符串输出到控制台。
js cdn图片转为base64
在JavaScript中,将CDN上的图片转换为Base64编码可以通过`fetch`、`XMLHttpRequest`或`FileReader` API来实现。这里是一个简单的示例:
```javascript
// 使用fetch获取图片
async function getImageAsBase64(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to load image: ${response.status}`);
}
const img = await response.blob(); // 转换为Blob对象
const reader = new FileReader();
reader.onload = () => {
return reader.result; // 返回Base64编码
};
reader.readAsDataURL(img);
} catch (error) {
console.error('Error:', error);
}
}
// 使用URL对象也可以实现类似效果
function getImageAsBase64URL(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous'; // 防止跨域问题
img.onload = () => {
resolve(URL.createObjectURL(img)); // 获取Image对象的DataURL
};
img.onerror = reject;
img.src = url;
});
}
// 使用方法
let imageUrl = 'https://cdn.example.com/image.jpg';
getImageAsBase64(imageUrl).then(base64Data => {
// base64Data就是图片的Base64编码
console.log('Base64 Image:', base64Data);
}).catch(error => {
console.error('Failed to convert image:', error);
});
// 或者使用URL对象的方式
getImageAsBase64URL(imageUrl).then(base64Data => {
// ...同样的处理Base64Data
}).catch(error => {
// ...处理错误
});
```