JS实现：将PNG相对路径转为Base64格式URL字符串的方法

我来帮你搞定这个需求！要实现把指定路径的PNG图片转换成Base64格式的URL字符串，我们可以利用浏览器的fetch API和FileReader API来完成，下面是具体的实现方案：

我们可以写一个异步函数，因为图片的加载和转换都是异步操作：

async function convertPngToBase64Url(imagePath) {
  try {
    // 1. 发起请求获取图片资源
    const response = await fetch(imagePath);
    if (!response.ok) {
      throw new Error(`图片加载失败，状态码：${response.status}`);
    }
    
    // 2. 将响应转换为Blob对象
    const blob = await response.blob();
    
    // 3. 用FileReader读取Blob并转换为Base64
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        // reader.result就是完整的Base64格式字符串，形如"data:image/png;base64,iVBORw0KGgoAA..."
        resolve(reader.result);
      };
      reader.onerror = () => reject(reader.error);
      reader.readAsDataURL(blob);
    });
  } catch (error) {
    console.error('转换过程出错：', error);
    throw error; // 可以根据需求决定是否抛出错误，或者返回默认值
  }
}

因为函数是异步的，你可以用async/await或者.then()的方式调用：

// 方式1：用async/await（需要在async函数内使用）
async function useImage() {
  try {
    const base64Url = await convertPngToBase64Url("/Content/Images/OK-x-small.png");
    console.log(base64Url);
    // 这里可以把base64Url赋值给img的src，或者作为CSS背景图使用
    // 比如：document.getElementById('my-img').src = base64Url;
  } catch (err) {
    // 处理错误，比如显示默认图片
  }
}

// 方式2：用.then()链式调用
convertPngToBase64Url("/Content/Images/OK-x-small.png")
  .then(base64Url => {
    console.log(base64Url);
    // 后续操作
  })
  .catch(err => console.error(err));

• 跨域问题：如果你的图片和当前页面不在同一个域名下，需要确保图片所在的服务器配置了CORS（跨域资源共享）允许你的域名访问，否则fetch会报错。
• 错误处理：函数里已经加了try/catch，调用的时候记得也要处理可能的错误（比如图片路径错误、网络问题等）。
• 性能考量：Base64格式的图片体积会比原PNG大大概30%，如果是大图片的话，可能会影响页面加载性能，所以建议只对小图标这类资源使用这种方式。
• 兼容性：fetch和FileReader在现代浏览器里都支持，如果你需要兼容IE的话，得换用XMLHttpRequest来替代fetch。

内容的提问来源于stack exchange，提问作者Sarah