js cdn图片转为base64

在JavaScript中，将CDN上的图片转换为Base64编码可以通过`fetch`、`XMLHttpRequest`或`FileReader` API来实现。这里是一个简单的示例：

// 使用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 => {
  // ...处理错误
});