js将url中的png转换为base64

前言

今天在处理一个系统中的图片覆盖到文字上的功能，需要将富文本内的指定base64图片替换为新的图片（只能拿到一个系统上传的url，还得做base64转换，然后替换）遇到如下两个问题，这里把踩坑记录贴出来供大家参考。
1.按网络上的方案转换base64后，替换到富文本中内容显示[object Promise]
解决方案：调用方法的地方也要加上await，否则会走异步请求 如console.log(${await getImgImg(imgUrl)})
2.图片替换后，能正常渲染，但是背景一直是黑色，这个我在网上找了很久都没找到解决方案,有人说先填白色背景然后再替换什么的我也试了不行透明度丢失变成了jpg，最后看到一篇博文，他写的是canvas.toDataURL(‘image/png’); 而我在网络上找到的方案写的是canvas.toDataURL(‘image/jpeg’); 额就png和jpeg的差别，这个我找了一个小时，找到解决方案后才发现自己被自己蠢哭，额有时候就是这样，一个小的问题却自己没发现还要到处找解决方案。

源码

下面我把我的所有源码放出来供大家参考。

const base64 = (url) => {
  return new Promise((resolve) => {
    const image = new Image();
    // 先设置图片跨域属性
    image.crossOrigin = 'Anonymous';
    // 再给image赋值src属性，先后顺序不能颠倒
    image.src = url;
    image.onload = function () {
      const canvas = document.createElement('CANVAS');
      // 设置canvas宽高等于图片实际宽高
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.globalAlpha = 1;
     const context= canvas.getContext('2d')
        context.drawImage(image, 0, 0);
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };
    image.onerror = () => {
      resolve({ message: '相片处理失败' });
    };
  });
};

const getImgImg = async (url) => {
  let base64str = await base64(url);
  return base64str;
};