前端将图片url转换位base64

将图片URL转换为Base64编码是前端开发中常见的操作，主要用于将图片嵌入到网页或者在某些API中作为数据传输。Base64编码是一种用64个字符表示任意二进制数据的方法，它的本质是一种编码方法，而不是加密方法，因此Base64编码后的数据仍然是公开的，可以直接被还原成原始数据。

实现这个转换的过程大致如下：

1. 使用JavaScript中的`XMLHttpRequest`或者`fetch` API来发起对图片URL的网络请求。
2. 请求成功后，读取返回的二进制图片数据。
3. 使用`btoa()`函数将二进制数据转换为Base64编码的字符串。
4. 在需要的时候，可以使用`atob()`函数将Base64编码的字符串解码回二进制数据。

以下是一个使用`fetch`和`btoa`的示例代码：

// 假设有一个图片的URL
const imageUrl = 'https://example.com/path/to/image.jpg';

// 使用fetch API请求图片资源
fetch(imageUrl)
  .then(response => {
    // 确保请求成功
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // 将响应的body转换为ArrayBuffer
    return response.arrayBuffer();
  })
  .then(buffer => {
    // 将ArrayBuffer转换为二进制字符串
    const binaryString = String.fromCharCode.apply(null, new Uint8Array(buffer));
    // 将二进制字符串转换为Base64编码
    const base64String = btoa(binaryString);
    console.log(base64String);
    // 此处可以根据需要将base64String赋值给img的src属性或者进行其他操作
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });