Javascript image.onload返回不是我想要的

我使用canvas标签来裁剪我的图像

我的代码如下：

autoCropImage(url){
    var img = new Image();
    const cropApp = this;

let x = img.onload = function(){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    const center_X = img.width/2, center_Y = img.height/2;
    let init_X=0, init_Y=0;
    ctx.drawImage(img, init_X, init_Y, img.width, img.height, 0, 0, img.width, img.height);

let dataUrl = canvas.toDataURL("image/jpeg", 1.0);
let dataUrl_short = dataUrl.replace("data:image/jpeg;base64,", "");
return dataUrl;
}();



img.src=url;
console.log(x);
return x;

}
//log result:
//data:,

我认为日志结果应该是一个Base64的字符串，但是回调是“代码>数据：，< /代码>

我的代码有什么问题？

您的函数是一个。您立即调用它，然后将其返回值赋给

img.onload

（然后将

img.onload

的值分配给

x

）

这意味着您没有将函数分配给

img.onload

，因此图像加载后不会发生任何事情

这还意味着，当您试图将图像作为参数传递给

ctx.drawImage

时，图像尚未加载

由于图像尚未加载，因此没有数据可通过

canvas.toDataURL

转换为数据URL

---

您需要：

从函数定义后删除

（）

，以便将其分配给

img.onload

，并在图像加载时调用

去掉

让x=

，因为那只是函数的一个副本

阅读

---

是否要返回不带

data:image/jpeg的数据url；base64

零件

---

如果是这样，您将返回

dataUrl

而不是方法中的

dataUrl\u short

。

您是否尝试过使用调试器？如果我在

img.onload

函数中声明变量

let result='hello world

，并且

返回结果

控制台。log（x）

将是helloworld@Oscar嗯。。。事实上，我不知道如何使用它。除了学习如何使用它，我还使用inspect查看控制台日志。加载图像时如何调用该函数？使用异步函数？@ChamperWu-请参阅我需要执行的操作列表中的第1项。您的意思是使用

img.load=function（）{…}

来代替

let x=img.load=function（）{}（）对吗？但是我这样做了，并且
console.log（img.onlaod）
将回调这样的函数
ƒ（）{var canvas=document.createElement（'canvas'）；var ctx=canvas.getContext（'2d'）；var center_X=img.width/2，center_Y=img.height/2；var init_X…
我想返回一个base64字符串