url转base64

写在前面:我是在antdProV4的基础上写的demo
1.引入React,useState,useEffect

import React, { useState, useEffect } from 'react';
// 因为umi默认开启的css-Module,路径不能直接写,所以引入图片
import testImg from '@/assets/test.jpg';

2.申明一个state

const [state, setstate] = useState('');

3.书写函数主体,网上看的也是千篇一律,我个人加了Promise,也可以使用async和aweit

/**
   * @description url转Base64
*/
function urlToBase64(url) {
  return new Promise((resolve) => {
    let timeStamp = new Date().getTime();
    //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 				<img> 省去了 append()，也就避免了文档冗余和污染
    let Img = new Image();
    // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
    Img.src = url + '?' + timeStamp;
    // 解决控制台跨域报错的问题
    Img.crossOrigin = 'Anonymous';
    //获取后缀
    let ext = Img.src.substring(Img.src.lastIndexOf('.') + 1).toLowerCase();
    Img.onload = function () {
      //要先确保图片完整获取到，这是个异步事件
      var canvas = document.createElement('canvas'); //创建canvas元素
      //确保canvas的尺寸和图片一样
      canvas.width = Img.width;
      canvas.height = Img.height;
      //将图片绘制到canvas中
      canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
      //转换图片为dataURL
      resolve(canvas.toDataURL(`image/${ext}`));
    };
  });
}

4.使用部分

<PageContainer content="">
 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
   <div style={{ width: 750 }}>
     <span>普通地址</span>
     <img src={testImg} style={{ width: '100%' }} alt="" />
   </div>

   <div style={{ width: 750 }}>
     <span>Base64地址</span>
     {/* 这个state就是前面申明的state */}
     <img src={state} style={{ width: '100%' }} alt="" />
   </div>
 </div>
</PageContainer>

5.调用

// 这个例子我是在这里调用的
useEffect(() => {
   	console.log("testImg:",testImg);
    // testImg: /static/test.c50f6919.jpg
    urlToBase64(testImg).then((a) => setstate(a));
}, []);

6.思考
如何通过函数调用,直接返回base64地址,而不需要.then(),欢迎讨论,互相学习

7.本文章所有代码贴上

import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import testImg from '@/assets/test.jpg';

export default function ImgurltoBase64(): React.FC {
  const [state, setstate] = useState('');
  useEffect(() => {
    console.log("testImg:",testImg);
    // testImg: /static/test.c50f6919.jpg
    urlToBase64(testImg).then((a) => setstate(a));
  }, []);
  /**
   * @description url转Base64
  */
  function urlToBase64(url) {
    return new Promise((resolve) => {
      let timeStamp = new Date().getTime();
      //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
      let Img = new Image();
      // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
      Img.src = url + '?' + timeStamp;
      // 解决控制台跨域报错的问题
      Img.crossOrigin = 'Anonymous';
      //获取后缀
      let ext = Img.src.substring(Img.src.lastIndexOf('.') + 1).toLowerCase();
      Img.onload = function () {
        //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement('canvas'); //创建canvas元素
        //确保canvas的尺寸和图片一样
        canvas.width = Img.width;
        canvas.height = Img.height;
        //将图片绘制到canvas中
        canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
        //转换图片为dataURL
        resolve(canvas.toDataURL(`image/${ext}`));
      };
    });
  }
  return (
    <PageContainer content="">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
        <div style={{ width: 750 }}>
          <span>普通地址</span>
          <img src={testImg} style={{ width: '100%' }} alt="" />
        </div>

        <div style={{ width: 750 }}>
          <span>Base64地址</span>
          <img src={state} style={{ width: '100%' }} alt="" />
        </div>
      </div>
    </PageContainer>
  );
}

8.实际效果