JS如何获取图片完全加载后信息

        很多情况下我们希望在onload事件中返回一个值，例如我们在图片加载完以后返回一些图片的信息

 const image = new Image();
 image.onload = function () {
      ...
      return ...
 };
 image.src = url;

        如果我们直接返回的话都知道是return不出来的，我之前是向onload函数中传入回调函数，执行回调函数传入想要的值，但是有了Promise对象我们可以更简单的解决这个问题，直接就可以在then中取得我们想要的值，可以举一反三。

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

下面是我自己做的一个完整的实例，构建一个util文件夹，index.ts代码如下

/**
 * 将路径图片转换为base64
 * @param url 图片的静态路径
 * @param coef 图片质量系数
 */
export const base64TransformByURL = function (url: string, coef:number = 1){
    
    function getBase64Image(img: HTMLImageElement) {
        let canvas: HTMLCanvasElement = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx: any = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let ext: string = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        let base64: string = canvas.toDataURL("image/" + ext, coef).split(',')[1];
        return base64;
    }
    return new Promise(function (resolve, reject){
        const image: HTMLImageElement = new Image();
        image.onload = function () {
            resolve(getBase64Image(image));
        };
        image.src = url;
    })
    
}

/**
 * 将上传的文件转换成base64 返回，目前仅支持单文件
 * @param file
 */

export const base64TransformByFile = async function(file: any){
    return new Promise(function (resolve, reject) {
        const oReader: FileReader = new FileReader();
        oReader.onload = async function (e: any) {
            resolve(await base64TransformByURL(e.target.result))
        }
        oReader.readAsDataURL(file);
    })
}

这样在调用的时候只需要

public async handleFileChange(event: any) {
    const r = await base64TransformByFile(event.currentTarget.files[0]);
    this.props.onFileChange(r);
}