我如何从文件阅读器返回调整大小的图像

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, await,

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)} 

/>

Answer 2

请问您为什么不喜欢使用状态的解决方案？这似乎是一个非常标准的用例。

您的状态可能如下所示：

state = {

  imageDescription: '',

  imageUrl: null

};

您的操作处理程序将在成功时简单地设置状态，如下所示：

img.onload = () => {

  ...

  this.setState({ imageDescription: fileName, imageSrc: img.src })

};

最后你的渲染函数看起来像这样：

render() {

  const { imageDescription, imageUrl } = this.state;

  return (

    <Fragment>

       <input 

         className={classes.inputForUpload} 

         accept='image/*' 

         type='file' 

         ref={uploadImage} 

         onChange={(e: IHTMLInputEvent) => handleUpload(e)} 

       />

       <img src={imageUrl} alt={imageDescription} />

    </Fragment>

  )

}

PS你可以删除handleUpload，直接调用resizeImage。