图片格式转化之图片转为base64格式

本文链接：https://blog.csdn.net/weixin_49014702/article/details/125223863

在我们日常做项目中，有时候需要把图片转化称base64格式，下面此方法能将本地图片以及网络图片转成base64格式

首先，第一步，我们需要实例化一个 canvas ，因为我们是借助canvas实现格式转化

在Vue项目中可这样实例化：

<canvas v-show="false"></canvas>

在其他项目中可这样：

<canvas style="dispaly:node"></canvas>

接着是核心部分;

// 图片转为base64格式
export const imageToBase64 = (url, ext, callback) => {
  let canvas = document.createElement('canvas'); // 创建canvas DOM元素
  const ctx = canvas.getContext('2d');
  // eslint-disable-next-line no-var
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = url;
  img.onload = function () {
    canvas.width = img.width ;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.height, img.width); // 参数可自定义
    // eslint-disable-next-line no-shadow
    const dataURL = canvas.toDataURL(`image/${ext}`);
    callback(dataURL); // 回掉函数获取Base64编码
    canvas = null;
  };
};

最后使用时：

 imageToBase64(
        `${window.location.origin}${imgUrl}`,
        'jpg',
        (base64) => {
            
          }
)