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

😲 项目中图片 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