2025-04-14

图片转换成base64格式的优缺点，以及画布跨越问题

# 优点

base64 格式的图片是文本格式，占用内存小，转换后的大小比例大概为 1/3，降低了资源服务器的消耗；
网页中使用 base64 格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
base64 编码的字符串，更适合不同平台、不同语言的传输；
算法是编码, 不是压缩, 编码后只会增加字节数，但是算法简单, 几乎不会影响效率，算法可逆, 解码很方便, 不用于私密信息通信;
解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;

# 缺点

base64 格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
网页加载图片虽然不用访问服务器了，但因为 base64 格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css，这比直接缓存图片要差很多，而且一般 HTML 改动比较频繁，所以等同于得不到缓存效益。

function getBase64Image(url) {
  const img = new Image();
  img.src = url;
  //因为是网络资源所以会有图片跨域问题产生，此属性可以解决跨域问题，下文详解
  img.setAttribute('crossOrigin', 'anonymous');
  return new Promise((resolve, reject) => {
    img.onload = () => {
      //canvas基本配置
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      resolve({
        success: true,
        //canvas.toDataURL的方法将图片的绝对路径转换为base64编码
        base64: canvas.toDataURL()
      });
    };
    img.onerror = () => {
      reject({ success: false });
    };
  });
}

//调用
getBase64Image(
  'https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46'
).then(res => {
  console.log(res); // {success : true, base64 :'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4A…etGgbgs19tVBD5K/+l/8/4jpK+RseVK4AAAAASUVORK5CYII='}
});

# crossOrigin 属性

如果你有一个跨源图像，你可以将它复制到画布上，但这“污点”的画布，阻止你阅读它(所以你不能“偷”图像，例如从内部网站的网站本身没有访问)。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许跨源访问，因此您可以通过画布访问图像数据。

# 这个属性有两个值可选：

anonymous：如果使用这个值的话就会在请求中的 header 中的带上 Origin 属性，但请求不会带上 cookie 和其他的一些认证信息。 use-credentials：这个就同时会在跨域请求中带上 cookie 和其他的一些认证信息。如果只写个空 crossOrigin=''，则和 anonymous 效果一样

上次更新: 2025-12-04