javascript - 如何从文件读取器返回调整大小的图像

Question

我创建了一个负责调整图像大小的函数，现在我想从该函数返回调整大小的图像。

我正在使用 react 并知道我可以通过使用 state 解决问题，但我不喜欢这个解决方案..

尝试返回每个不同的范围，但我仍然收到 undefined 响应。另外，当我返回reader本身时，我得到了旧数据。

界面

   interface IHTMLInputEvent extends Event {
        target: HTMLInputElement & EventTarget;
    }

调整大小功能

function resizeImage(file: IHTMLInputEvent, width: number) {

        const fileName = file.target.files[0].name;
        const reader = new FileReader();

        reader.readAsDataURL(file.target.files[0]);

        reader.onload = (event) => {
            const img = new Image();
            img.src = event.target.result.toString();

            img.onload = () => {
                const elem = document.createElement('canvas');
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;

                const ctx = elem.getContext('2d');
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);

                ctx.canvas.toBlob((blob) => {
                    return new File([blob], fileName, { type: 'image/jpeg', lastModified: Date.now() });
                }, 'image/jpeg', 1);
            };
        };
    }

处理上传的函数(到目前为止)

function handleUpload(e: IHTMLInputEvent) {
        const resizedImage = resizeImage(e, 600);
    }

输入字段

 <input 
   className={classes.inputForUpload} 
   accept='image/*' 
   type='file' 
   ref={uploadImage} 
   onChange={(e: IHTMLInputEvent) => handleUpload(e)} 
  />

我想返回新创建的图像。

Answer 1

你可以使用 Promise 来解决这个问题，

function resizeImage(file: IHTMLInputEvent, width: number) {

  return new Promise((resolve, reject) => {

    const fileName = file.target.files[0].name;
    const reader = new FileReader();

    reader.readAsDataURL(file.target.files[0]);

    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result.toString();

      img.onload = () => {
        const elem = document.createElement('canvas');
        const scaleFactor = width / img.width;
        elem.width = width;
        elem.height = img.height * scaleFactor;

        const ctx = elem.getContext('2d');
        ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);

        ctx.canvas.toBlob((blob) => {
          resolve(new File([blob], fileName, {
            type: 'image/jpeg',
            lastModified: Date.now()
          }));
        }, 'image/jpeg', 1);
      };
    };
  });
}

使用异步、等待、

async function handleUpload(e: IHTMLInputEvent) {
  const resizedImage = await resizeImage(e, 600);

  // do you suff here
}

JSX，

<input 
   className={classes.inputForUpload} 
   accept='image/*' 
   type='file' 
   ref={uploadImage} 
   onChange={async (e: IHTMLInputEvent) => await handleUpload(e)} 
/>