😲 项目中图片 url、base64(dataURL)转化

1、url转base64

http://124.1.2.2:4444/load/8/c -> data:image/png;base64 …

// 方法
const urlToBase64 = (url) => {
          
   
  return new Promise ((resolve,reject) => {
          
   
    let image = new Image();
    image.onload = function() {
          
   
      let canvas = document.createElement(canvas);
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      // 将图片插入画布并开始绘制
      canvas.getContext(2d).drawImage(image, 0, 0);
      // result
      let result = canvas.toDataURL(image/png)
      resolve(result);
    };
    // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
    image.setAttribute("crossOrigin",Anonymous);
    image.src = url;
    // 图片加载失败的错误处理
    image.onerror = () => {
          
   
      reject(new Error(图片流异常));
    };
  })
}

const ArticleItemRight = memo(function (props) {
          
   
  const [imgBase64, setImgBase64] = useState();

  urlToBase64(item.coverInfo.imgURL).then(res => {
          
   
    // 转化后的base64图片地址
    // console.log(base64, res)
    setImgBase64(res)
  })

return （
        <div className={
          
   item-img}>
          {
          
   /* 如果转换的 base64 太大还未加载出来，用其他网络图片代替显示一下 */}
          <img src={
          
   imgBase64 || https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg}
               alt=""
               loading={
          
   lazy}
               className={
          
   img}
               onLoad={
          
   handleImgLoad}/>
        </div>
  )
})

export default ArticleItemRight