gpt4 book ai didi

javascript - image.onload 返回不是我想要的

转载 作者:行者123 更新时间:2023-12-03 02:17:38 24 4
gpt4 key购买 nike

我使用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的字符串,但是回调是data:,

我的代码有什么问题?

最佳答案

您的函数是IIFE 。您立即调用它,然后将其返回值分配给img.onload

(然后将 img.onload 的值分配给 x)。

这意味着您没有为 img.onload 分配函数,因此图像加载后不会发生任何事情。

这也意味着当您尝试将图像作为参数传递给 ctx.drawImage 时,图像尚未加载。

由于图像尚未加载,因此没有数据可以使用 canvas.toDataURL 转换为数据 URL。

<小时/>

您需要:

  1. 从函数定义后面删除 (),以便将其分配给 img.onload 并在图像加载时调用
  2. 去掉 let x = 因为那只是函数的副本
  3. 阅读 How do I return the response from an asynchronous call?

关于javascript - image.onload 返回不是我想要的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49303254/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com