Javascript 尝试使用画布压缩图像，但JPG或PNG返回黑色图像或透明/空图像

我正在尝试在上传前压缩图像

单击浏览按钮，选择一个图像，然后在onChange中调用

onflesect

函数

在这里，我面临两个问题

无法获取img宽度和高度，不确定为什么它总是返回零

最终输出的

dataurl

是一个字符串，但当加载JPG图像时，它将是黑色图像，对于PNG，它将是空的透明框/图像

尝试了多种方法，但没有成功

下面是代码

//HTML

<input type="file" accept=".png,.jpg,.jpeg"  onChange=this.onFileSelect.bind(this)/>

//JS

onFileSelect(evt){
        var filesArr = evt.target.files;
        var reader = new FileReader();
        if(filesArr === undefined || filesArr.length === 0)return;
        var img = document.createElement("img");
        reader.onload = function (e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var ctx = canvas.getContext("2d");
            //ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 400;
            var MAX_HEIGHT = 400;
            var width = img.width?img.width:MAX_WIDTH;//not getting img width so ternary operator
            var height = img.height?img.height:MAX_HEIGHT;//not getting img height so ternary operator

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL(filesArr[0].type);
            this.setState({
                imagePath: dataurl,
                showImageEditor:true,
            })
        }
        reader.readAsDataURL(filesArr[0]);
    }

//HTML
//JS
onFileSelect（evt）{
var filesArr=evt.target.files；
var reader=new FileReader（）；
if（filesArr==undefined | | filesArr.length==0）返回；
var img=document.createElement（“img”）；
reader.onload=函数（e）{
img.src=e.target.result；
var canvas=document.createElement（“canvas”）；
//var ctx=canvas.getContext（“2d”）；
//ctx.drawImage（img，0,0）；
var MAX_WIDTH=400；
var最大高度=400；
var width=img.width？img.width:MAX_width；//未获取img width，因此使用三元运算符
var height=img.height？img.height:MAX_height；//不获取img height，所以使用三元运算符
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0，0，宽度，高度）；
var dataurl=canvas.toDataURL（filesArr[0].type）；
这是我的国家({
imagePath:dataurl，
showImageEditor：没错，
})
}
reader.readAsDataURL（filesArr[0]）；
}

在获得宽度之前，必须先渲染img

import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      imagePath: '',
      showImageEditor: false,
    }
    this.onFileSelect = this.onFileSelect.bind(this)
  }
  onFileSelect(evt) {
    var filesArr = evt.target.files
    console.log('filesArr', filesArr)
    let self = this
    var reader = new FileReader()
    if (filesArr === undefined || filesArr.length === 0) return
    var img = document.createElement('img')
    reader.onload = function (e) {
      img.src = e.target.result
      var canvas = document.createElement('canvas')
      //var ctx = canvas.getContext("2d");
      //ctx.drawImage(img, 0, 0);
      img.onload = function (i) {
        
        console.log('img', img.width)
        var MAX_WIDTH = 400
        var MAX_HEIGHT = 400
        var width = img.width ? img.width : MAX_WIDTH //not getting img width so ternary operator
        var height = img.height ? img.height : MAX_HEIGHT //not getting img height so ternary operator

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width
            width = MAX_WIDTH
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height
            height = MAX_HEIGHT
          }
        }
        canvas.width = width
        canvas.height = height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, width, height)

        var dataurl = canvas.toDataURL(filesArr[0].type)
        self.setState({
          imagePath: dataurl,
          showImageEditor: true,
        })
      }
    }
    reader.readAsDataURL(filesArr[0])
  }
  render() {
    const {imagePath}=this.state
    return (
      <div>
        <input
          type='file'
          accept='.png,.jpg,.jpeg'
          onChange={this.onFileSelect}
        />
        {this.state.imagePath ? (
          <img src={this.state.imagePath} alt='' />
        ) : null}
      </div>
    )
  }
}

import React，{Component}来自“React”
导出默认类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
图像路径：“”，
showImageEditor:false，
}
this.onFileSelect=this.onFileSelect.bind（this）
}
onFileSelect（evt）{
var filesArr=evt.target.files
log（'filesArr'，filesArr）
让self=这个
var reader=new FileReader（）
if（filesArr==undefined | | filesArr.length==0）返回
var img=document.createElement（'img'）
reader.onload=函数（e）{
img.src=e.target.result
var canvas=document.createElement（'canvas'）
//var ctx=canvas.getContext（“2d”）；
//ctx.drawImage（img，0,0）；
img.onload=函数（i）{
console.log（'img'，img.width）
var最大宽度=400
var最大高度=400
var-width=img.width？img.width:MAX\u width//未获取img width，因此使用三元运算符
var height=img.height？img.height:最大高度//不获取img高度
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度
宽度=最大宽度
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度
高度=最大高度
}
}
canvas.width=宽度
canvas.height=高度
var ctx=canvas.getContext（'2d'）
ctx.drawImage（图像，0，0，宽度，高度）
var dataurl=canvas.toDataURL（filesArr[0].type）
自我状态({
imagePath:dataurl，
showImageEditor：没错，
})
}
}
reader.readAsDataURL（filesArr[0]）
}
render（）{
const{imagePath}=this.state
返回(
{this.state.imagePath(
)：null}
)
}
}

非常感谢@斯沃德。img.onload函数就是其中的诀窍。再次感谢